## :-: [HTML 5 Canvas 參考手冊](http://www.w3school.com.cn/tags/html_ref_canvas.asp) > ## :-: canvas - 繪制線形 / 填充 ``` <!-- canvas畫布 --> <canvas id="demo" width="600" height="400"></canvas> <script> // 畫筆 - 獲取畫布上下文對象、2D 目前沒有3D var ctx = demo.getContext('2d'); // 想要畫的圖形 ctx.moveTo(50, 50); // 開始 - 起始點、 ctx.lineTo(150, 50); // 到某一點 ctx.lineTo(150, 150); ctx.closePath(); // 閉合路徑、 // 設置畫筆寬度、 ctx.lineWidth = 5; // 設置畫筆顏色、 ctx.strokeStyle = '#f40'; // 開始畫 ctx.stroke(); // 填充 ctx.fill(); // 抬起畫筆 ctx.beginPath(); </script> ```  > ## :-: canvas - 繪制矩形 / [圓](http://www.w3school.com.cn/tags/canvas_arc.asp) / 圓角矩形 ``` // 畫筆 - 獲取畫布上下文對象、2D 目前沒有3D var ctx = demo.getContext('2d'); // 畫矩形 - ctx.rect(x, y, dx, dy); ctx.rect(200, 50, 100, 100); ctx.stroke(); ctx.beginPath(); // 直接繪制矩形、 ctx.strokeRect(310, 50, 100, 100); // 直接繪制帶填充的矩形、 ctx.fillRect(310, 160, 100, 100); // 橡皮擦 - ctx.clearRect(x, y, dx, dy) ctx.clearRect(180, 30, 50, 50); // 畫弧形 - 圓 ctx.arc(x,y,r,sAngle,eAngle,counterclockwise); ctx.arc(100, 100, 50, 0, Math.PI * 2, 0); ctx.stroke(); ctx.beginPath(); // Demo ctx.moveTo(100, 250); ctx.arc(100, 250, 50, 0, Math.PI * 1.5, 0); ctx.lineTo(100, 250); ctx.stroke(); ctx.beginPath(); ```    ``` // 畫筆 - 獲取畫布上下文對象、2D 目前沒有3D var ctx = demo.getContext('2d'); // 繪制圓角矩形 - ctx.arcTo(x1, y1, x2, y2, r); ctx.moveTo(100, 120); ctx.arcTo(100, 200, 200, 200, 20); // 圓角 ctx.arcTo(200, 200, 200, 100, 20); ctx.arcTo(200, 100, 100, 100, 20); ctx.arcTo(100, 100, 100, 200, 20); ctx.stroke(); ctx.beginPath(); ```  > ## :-: canvas - 貝塞爾曲線 ``` // 2次 貝塞爾曲線 - ctx.quadraticCurveTo(x1, y1, ex, ey); // x1,y1 == 控制點、ex,ey == 結束點 ctx.moveTo(100, 100); ctx.quadraticCurveTo(100, 200, 200, 200); ctx.stroke(); ctx.beginPath(); // 3次 貝塞爾曲線 - ctx.bezierCurveTo(x1, y1, x2, y2, ex, ey); // x1,y1,x2,y2 == 控制點、ex,ey == 結束點 ctx.moveTo(300, 100); ctx.bezierCurveTo(400, 300, 500, 100, 600, 300); ctx.stroke(); ctx.beginPath(); ```  > ## :-: canvas - 變換 / 圖案 / 其他 ``` // 畫筆 - 獲取畫布上下文對象、2D 目前沒有3D var ctx = demo.getContext('2d'); // 平移 - ctx.translate(dx, dy); (放在繪圖之前) ctx.translate(-50, -50); // 平移 // 縮放 - ctx.scale(sx, sy); ctx.scale(2, 2); // 縮放 // 旋轉 - ctx.rotate(Math.PI); ctx.rotate(Math.PI / 4); ctx.save(); // 保存當前繪圖狀態、1 ctx.restore(); // 恢復保存的繪圖狀態、2 // 先重置再變換 - ctx.setTransform(水平縮放, 水平傾斜, 垂直傾斜, 垂直縮放, 水平移動, 垂直移動); ctx.setTransform(1, 1, 1, 0.5, 123, 123); // 在之前的基礎上變換 - ctx.transform(水平縮放, 水平傾斜, 垂直傾斜, 垂直縮放, 水平移動, 垂直移動); ctx.transform(1, 2, 3, 4, 5, 6); ctx.strokeRect(100, 100, 200, 200); ctx.stroke(); ctx.beginPath(); // 填充圖案 - ctx.createPattern(img, repeat); var img = new Image(); img.onload = function() { // 圖片加載是異步的過程、需要在加載完成事件里使用、 var fill = ctx.createPattern(this, 'no-repeat'); // 不重復 ctx.fillStyle = fill; // 設置顏色為圖案 ctx.fillRect(50, 50, 100, 100); // 繪制帶填充的矩形 ctx.stroke(); ctx.beginPath(); } img.src = './src/wx.jpg'; // 線性漸變 - ctx.createLinearGradient(x1, y1, x1, y); var bg = ctx.createLinearGradient(0, 0, 200, 200); bg.addColorStop(0, 'red'); bg.addColorStop(0.25, '#139'); bg.addColorStop(0.5, '#168'); bg.addColorStop(0.75, '#654'); bg.addColorStop(1.0, '#000'); ctx.fillStyle = bg; ctx.fillRect(50, 50, 200, 200); ctx.stroke(); ctx.beginPath(); // 徑向漸變 - ctx.createRadialGradient(x1, y1, r1, x2, y2, r2); var bg = ctx.createRadialGradient(200, 200, 0, 200, 200, 100); bg.addColorStop(0, '#fff'); bg.addColorStop(1.0, '#000'); ctx.fillStyle = bg; ctx.arc(200, 200, 100, 0, Math.PI * 2, false); // 畫圓 ctx.fill(); // 填充 ctx.stroke(); ctx.beginPath(); // 陰影 ctx.shadowColor = 'red'; // 陰影顏色 ctx.shadowOffsetX = 10; // X - 偏移量 ctx.shadowOffsetY = 10; // Y - 偏移量 ctx.shadowBlur = 10; // 模糊程度 // ---------------------------------- ctx.fillRect(100, 100, 100, 100); ctx.stroke(); ctx.beginPath(); // 文字陰影 ctx.shadowColor = 'red'; // 陰影顏色 ctx.shadowOffsetX = 10; // X - 偏移量 ctx.shadowOffsetY = 10; // Y - 偏移量 ctx.shadowBlur = 10; // 模糊程度 // ---------------------------------- ctx.fillStyle = '#aaa'; // 填充顏色 ctx.font = '50px sans-serif'; ctx.fillText('Hello World~', 100, 100); ctx.stroke(); ctx.beginPath(); // 線段樣式、.lineCap .lineJoin ctx.lineCap = 'round'; // 圓形 ctx.lineJoin = 'bevel'; // 方形 // 更多樣式自行百度 ```  > ## :-: canvas - 裁剪 ``` ctx.arc(200, 200, 50, 0, Math.PI * 2, true); // 圓 ctx.stroke(); ctx.clip(); // 裁剪 ctx.fillRect(200, 200, 50, 50); // 帶填充矩形 ctx.beginPath(); ```  > ## :-: canvas - 繪制圖片 ``` // 繪制圖片 - var img = new Image(); img.onload = function() { // 圖片加載是異步的過程、需要在加載完成事件里使用、 // 3個參數的用法、ctx.drawImage(img, x, y); ctx.drawImage(img, 10, 10); // 5個參數的用法、ctx.drawImage(img, x, y, dx.dy); ctx.drawImage(img, 220, 10, 50, 50); // 9個參數的用法、ctx.drawImage(img, x1, y1, dx1, dy1, x2, y2, w2, h2); // 截取圖片0,0 100,100的區域，放到220,70的位置，改變寬高為200*200 ctx.drawImage(img, 0, 0, 100, 100, 220, 70, 200, 200); ctx.beginPath(); } img.src = './src/wx.jpg'; ```  > ## :-: canvas - 其他 ``` // 將畫板導出為圖片編碼 (受同源策略影響) data:image/png;base64 var base64 = demo.toDataURL(); console.log(base64); // 創建新的空白ImageData對象、一般不用 ctx.createImageData(100, 100); // 獲取指定區域的像素信息(object) ctx.getImageData(x, y, dx, dy); var data = ctx.getImageData(100, 100, 50, 50); // 放回指定區域的像素、ctx.putImageData(data, x, y); ctx.putImageData(data, 100, 300); // 命中檢查 ```