今日踩坑
在同一个canvas中绘制多个不同形状,颜色的图形时,后面的总是将前面的颜色覆盖
解决方法:
beginPath() 和 closePath()
这两个函数可以起到类似 <div>
的作用,用它来把每个图形包围,就可以绘制不同颜色的图形了。
例如
// 绘制矩形
ctx.beginPath()
ctx.rect(486, 455, 58, 43);
ctx.strokeStyle = '#2DE0A5';
ctx.stroke();
ctx.fillStyle = 'rgba(45, 224, 165, 0.3)';
ctx.fill();
ctx.closePath()
ctx.beginPath()
ctx.rect(486, 498, 58, 43);
ctx.strokeStyle = '#2DE0A5';
ctx.stroke();
ctx.fillStyle = 'rgba(45, 224, 165, 0.3)';
ctx.fill();
ctx.closePath()