我們知道canvas是畫布,今天我們就來畫布上面畫線和麵。
Canvas 2D画线和面
canvas是HTML5中的元素,當沒有設定寬度和高度的時候,canvas會初始化寬度為300像素和高度為150像素。該元素可以使用CSS來定義大小;如果在繪製時圖像會伸縮以適應它的框架尺寸,那麼CSS的尺寸與初始畫布的比例不一致,會出現扭曲。
canvas一開始是空白的。為了展示,首先腳本需要找到渲染上下文,然後在它的上面繪製。
var canvas = document.getElementById('cv'); var ctx = canvas.getContext('2d');
兼容性检查在不支持登入後複製
得到了context,就好像獲得了畫筆,這時我們在畫布上畫下一個方塊:
ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; ctx.fillRect (30, 30, 55, 50);
CanvasRenderingContext2D.fillRect() 是Canvas 2DAPI# 繪製填滿矩形的方法。矩形的起點在 (x, y) 位置,矩形的尺寸是 width 和 height ,fillStyle屬性決定矩形的樣式。
同理,畫一條線也是呼叫ctx的方法:
ctx.beginPath(); ctx.moveTo(0,0); ctx.lineTo(100, 100); ctx.stroke();
CanvasRenderingContext2D.stroke() 是Canvas 2D API 使用非零環繞規則,根據目前的畫線樣式,繪製目前或已經存在的路徑的方法。
上面的程式碼中我們先繪製一條路徑,然後透過stroke方法用目前的樣式渲染這個路徑。
【相關推薦】
#以上是html5中Canvas的使用--畫線與麵的詳細內容。更多資訊請關注PHP中文網其他相關文章!