<canvas id="canvas"></canvas>
js
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'green'; //顏色必須在畫出來之前
ctx.fillRect(10, 10, 100, 100);
不建議用css控制canvas寬高,會等比縮放。852
CanvasRenderingContext2D.fillRect()
填充一個矩形
參數分別為x,y,width,height。
CanvasRenderingContext2D.strokeRect()
畫出一個矩形邊框。
參數分別為x,y,width,height。
CanvasRenderingContext2D.clearRect()
是 Canvas 2D API 設置指定矩形區域內(以 點 (x, y) 為起點,范圍是(width, height) )所有像素變成透明,并擦除之前繪制的所有內容的方法。
clearRect(x, y, width, height)
CanvasRenderingContext2D.beginPath()
是 Canvas 2D API 通過清空子路徑列表開始一個新路徑的方法。 當你想創建一個新的路徑時,調用此方法。
CanvasRenderingContext2D.moveTo()
是 Canvas 2D API 將一個新的子路徑的起始點移動到(x,y)坐標的方法。
ctx.moveTo(x, y)
CanvasRenderingContext2D.lineTo()
是 Canvas 2D API 使用直線連接子路徑的終點到x,y坐標的方法(并不會真正地繪制)。
ctx.lineTo(x, y);
CanvasRenderingContext2D.stroke()
是 Canvas 2D API 使用非零環繞規則,根據當前的畫線樣式,繪制當前或已經存在的路徑的方法。
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(50,50);
ctx.lineTo(200, 50);
ctx.stroke();
beginPath()開始 ,moveTo()移動畫筆,lineTo()決定要從畫筆現在位置連接到的坐標并移動到該坐標,
stroke()畫出這條線。
CanvasRenderingContext2D.fill()
是 Canvas 2D API 根據當前的填充樣式,填充當前或已存在的路徑的方法。采取非零環繞或者奇偶環繞規則。
CanvasRenderingContext2D.fillStyle
ctx.fillStyle = color;
ctx.fillStyle = gradient;//填充漸變的對象CanvasRenderingContext2D.createLinearGradient(), CanvasRenderingContext2D.createRadialGradient()
ctx.fillStyle = pattern;//重復的對象
填充出一個三角形
ctx.beginPath();
ctx.moveTo(10,10);
ctx.lineTo(50,10);
ctx.lineTo(30,30);
ctx.fillStyle='red';
ctx.fill();
注意:當你調用fill()函數時,所有沒有閉合的形狀都會自動閉合,所以你不需要調用closePath()函數。但是調用stroke()時不會自動閉合。
CanvasRenderingContext2D.arc()
是 Canvas 2D API 繪制圓弧路徑的方法。 圓弧路徑的圓心在 (x, y) 位置,半徑為 r ,根據anticlockwise (默認為順時針)指定的方向從 startAngle 開始繪制,到 endAngle 結束。
ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise)
x 圓弧中心(圓心)的 x 軸坐標。
y 圓弧中心(圓心)的 y 軸坐標。
radius 圓弧的半徑。
startAngle 圓弧的起始點, x軸方向開始計算,單位以弧度表示。
endAngle 圓弧的終點, 單位以弧度表示。
anticlockwise 可選的Boolean值 ,如果為 true,逆時針繪制圓弧,反之,順時針繪制。
lineWidth = 寬度
移動端
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
手機不適合用mouse事件
改用touch事件
ontouchstart
ontouchmove
ontouchend
touch與mouse有些區別
touchEvent.touches[n]
touch事件可能有多個點同時被按