Canvas—描邊與填充

描邊

stroke

Canvas中常用的stroke方法就是描邊方法，它用以描繪輪廓。

const myCanvas = document.getElementById('myCanvas');
const ctx = myCanvas.getContext('2d');
ctx.moveTo(0, 0);
ctx.lineTo(100, 100);
ctx.lineTo(0, 100);
ctx.stroke();

strokeStyle

顧名思義，strokeStyle即用以描述描邊的樣式，簡單地說就是邊的顏色。

const myCanvas = document.getElementById('myCanvas');
const ctx = myCanvas.getContext('2d');
ctx.moveTo(0, 0);
ctx.lineTo(100, 100);
ctx.lineTo(0, 100);
ctx.strokeStyle = 'blue';   //設置邊的顏色爲藍色
ctx.stroke();

strokeRect

該方法就是通過描邊的方式繪製矩形。

const myCanvas = document.getElementById('myCanvas');
const ctx = myCanvas.getContext('2d');
ctx.strokeRect(100, 100, 150, 100);

填充

fill

填充，即用某種顏色填充某閉合空間內部。

例如，

const myCanvas = document.getElementById('myCanvas');
const ctx = myCanvas.getContext('2d');
ctx.moveTo(0, 0);
ctx.lineTo(100, 100);
ctx.fillStyle = 'green';
ctx.fill();

可以看到在這個例子中，並不能畫出任何東西，這是因爲一條直線還不能形成一個閉合區域。若是再加一條即可，

const myCanvas = document.getElementById('myCanvas');
const ctx = myCanvas.getContext('2d');
ctx.moveTo(0, 0);
ctx.lineTo(100, 100);
ctx.lineTo(0, 100);
ctx.fillStyle = 'green';
ctx.fill();

fill方法會自動形成一個閉合區域並填充。

fillRect

有strokeRect，自然也就有fillRect，參數也都一致。

const myCanvas = document.getElementById('myCanvas');
const ctx = myCanvas.getContext('2d');
ctx.fillRect(100, 100, 150, 150);

fillStyle

同樣地，fillStyle也是用以修改填充樣式，即填充顏色。

const myCanvas = document.getElementById('myCanvas');
const ctx = myCanvas.getContext('2d');
ctx.fillStyle = 'orange';
ctx.fillRect(100, 100, 150, 150);