我們知道canvas是畫布，今天我們就來畫布上面畫線和麵。

1.Html中的畫布

canvas是HTML5中的元素，當沒有設定寬度和高度的時候，canvas會初始化寬度為300像素和高度為150像素。該元素可以使用CSS來定義大小；如果在繪製時圖像會伸縮以適應它的框架尺寸，那麼CSS的尺寸與初始畫布的比例不一致，會出現扭曲。

2.渲染上下文

canvas一開始是空白的。為了展示，首先腳本需要找到渲染上下文，然後在它的上面繪製。 元素有一個做 getContext() 的方法，這個方法是用來獲得渲染上下文和它的繪畫功能。 getContext()只有一個參數，上下文的格式。對於2D圖像你可以使用 CanvasRenderingContext2D。

var canvas = document.getElementById('cv'); var ctx = canvas.getContext('2d');

兼容性检查在不支持  标签的浏览器中如何展示替换内容。通过简单的测试getContext()方法的存在，脚本可以检查编程支持性。上面的代码片段现在变成了这个样子： var canvas = document.getElementById('tutorial'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); // drawing code here } else { // canvas-unsupported code here }

登入後複製

3.畫一個方塊

得到了context，就好像獲得了畫筆，這時我們在畫布上畫下一個方塊：

ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; ctx.fillRect (30, 30, 55, 50);

CanvasRenderingContext2D.fillRect() 是Canvas 2DAPI# 繪製填滿矩形的方法。矩形的起點在 (x, y) 位置，矩形的尺寸是 width 和 height ，fillStyle屬性決定矩形的樣式。

4.畫一條線

同理，畫一條線也是呼叫ctx的方法：

ctx.beginPath(); ctx.moveTo(0,0); ctx.lineTo(100, 100); ctx.stroke();

CanvasRenderingContext2D.stroke() 是Canvas 2D API 使用非零環繞規則，根據目前的畫線樣式，繪製目前或已經存在的路徑的方法。
上面的程式碼中我們先繪製一條路徑，然後透過stroke方法用目前的樣式渲染這個路徑。

【相關推薦】

1.免費h5線上影片教學

2.HTML5 完整版手冊

#3.php.cn原始html5影片教學

以上是html5中Canvas的使用--畫線與麵的詳細內容。更多資訊請關注PHP中文網其他相關文章！