HTML5 Canvas编写五彩连珠（2）：画图(2)_H5之家 - 中国HTML5教程资源分享第一站

canvas教程

HTML5 Canvas编写五彩连珠（2）：画图(2)

字号+ 作者：H5之家来源：H5之家 2015-10-04 16:33 我要评论( )

[javascript] clearBubble: function (x, y) { var px = this.startX + this.cellWidth * x - this.cellWidth + 0.5; var py = this.startY + this.cellWidth * y - this.cellWidth + 0.5; ctx.beginPath(); ctx.cl

[javascript]
clearBubble: function (x, y) { var px = this.startX + this.cellWidth * x - this.cellWidth + 0.5; var py = this.startY + this.cellWidth * y - this.cellWidth + 0.5; ctx.beginPath(); ctx.clearRect(px, py, this.cellWidth - 1, this.cellWidth - 1); ctx.stroke(); }

clearBubble: function (x, y) { var px = this.startX + this.cellWidth * x - this.cellWidth + 0.5; var py = this.startY + this.cellWidth * y - this.cellWidth + 0.5; ctx.beginPath(); ctx.clearRect(px, py, this.cellWidth - 1, this.cellWidth - 1); ctx.stroke(); }
　ok，是不是很霸气？ o(∩_∩)o 哈哈，不过在获取泡泡的位置时是不是很纠结，为什么画泡泡是 width/2 而擦除要加0.5？
画圆是从中心点开始画，所以要去掉半径，而擦数不能擦掉我们的棋盘线，所以要偏移0.5 。