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