<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()畫出這條線。

image.png

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();

image.png

注意：當你調用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事件可能有多個點同時被按