基本骨骼
|
1 2 3 4 5 |
<canvas id="canvas" width=1000 height=1000 style="border: 1px black dotted"></canvas> <script> var ctx = document.getElementById('canvas').getContext('2d'); </script> |
矩形
實心：
|
1 2 3 4 5 6 7 |
// 填充色 (預設為黑色) ctx.fillStyle = 'darkSlateBlue'; // 規定畫布左上角座標為 (0, 0) // 矩形左上角座標 (0, 0) // 矩形大小 100*100 ctx.fillRect(0, 0, 100, 100); |
空心：
|
1 2 3 4 5 6 7 |
// 邊框顏色 (預設黑色) ctx.strokeStyle = 'darkSlateBlue'; // 規定畫布左上角座標為 (0, 0) // 矩形左上角座標 (0, 0) // 矩形大小 100*100 ctx.strokeRect(0, 0, 100, 100); |
圓形
實心：
|
1 2 3 4 5 6 |
ctx.fillStyle = 'darkSlateBlue'; ctx.beginPath(); ctx.arc(100, 100, 50, 0, Math.PI * 2, true); ctx.closePath(); ctx.fill(); |
空心：
|
1 2 3 4 5 6 |
ctx.strokeStyle = 'darkSlateBlue'; ctx.beginPath(); ctx.arc(100, 100, 50, 0, Math.PI * 2, true); ctx.closePath(); ctx.stroke(); |
線段
|
1 2 3 4 5 6 7 8 |
ctx.strokeStyle = 'darkSlateBlue'; ctx.beginPath(); ctx.moveTo(100, 100); // 起點 ctx.lineTo(200, 200); ctx.lineTo(300, 100); // ctx.closePath(); ctx.stroke(); |
影像
動態生成 img：
|
1 2 3 4 5 6 7 8 9 |
var img = new Image(); // 一定要等圖片載入後(或者已經在快取中了)才能用 drawImage 方法 img.onload = function() { // 左上角座標 & 影像大小 ctx.drawImage(img, 0, 0, 100, 56); }; img.src = '0.jpg'; |
或者直接從 dom 中取：
|
1 2 |
var img = document.getElementById('myImg'); ctx.drawImage(img, 0, 0, 100, 56); |
文字
文字 的位置設定相對複雜，不像矩形、影像一樣有個固定的左上角座標，也不像圓一樣有固定的圓心。文字的位置設定也是一個類似 (x, y) 形式的座標，這個位置可以是文字的 4 個角，或者中心。
x 部分，藍線（水平座標）為 x 座標所在位置（textAlign 屬性）：
|
1 2 3 4 5 6 |
ctx.font = "bold 80px serif" ctx.textAlign = "start"; // 預設值為 start ctx.fillStyle = 'darkSlateBlue'; // 文字內容、座標 ctx.fillText('hello world', 0, 0); |
y 部分，藍線（垂直座標）為 y 座標所在位置 （textBaseline 屬性）：
|
1 2 3 4 5 6 7 |
ctx.font = "bold 80px serif" ctx.textAlign = "start"; // 預設值為 start ctx.textBaseline = "hanging"; // 預設值為 alphabetic ctx.fillStyle = 'darkSlateBlue'; // 文字內容、座標 ctx.fillText('hello world', 0, 0); |
所以文字的位置共有 5*6=30 種。
fillText 方法不支援文字斷行，即所有文字出現在一行內。所以，如果要生成多行文字，只有呼叫多次 fillText 方法。
空心的話用 stroke 即可。
其他 API
屬性：
- lineWidth：stroke 的線條寬度
ctx.lineWidth = 2
方法：
- clearRect： 清除某部分（矩形區域）畫布
ctx.clearRect(0, 0, 100, 100) - measureText： 計算文字物件的寬度
- translate
- rotate