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