今日填坑:
在同一个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()
ok,问题搞定