这里用到了canvas的径向渐变，在鼠标从标处绘制一个圆形，代码如下：

drawPoint: function (x, y) { this.maskCtx.beginPath(); var radgrad = this.maskCtx.createRadialGradient(x, y, 0, x, y, 30); radgrad.addColorStop(0, 'rgba(0,0,0,0.6)'); radgrad.addColorStop(1, 'rgba(255, 255, 255, 0)'); this.maskCtx.fillStyle = radgrad; this.maskCtx.arc(x, y, 30, 0, Math.PI * 2, true); this.maskCtx.fill(); if (this.drawPercentCallback) { this.drawPercentCallback.call(null, this.getTransparentPercent(this.maskCtx, this.width, this.height)); } } （7）涂抹区域百分比

在很多时候，我们还需要知道用户涂抹了多少然后进行下一步交互，如当用户涂抹了80%后，才允许下一张显示。

这个百分比如何计算呢？其实很简单，我们可以用getImageData方法到画布上指定矩形的像素数据，由于每个像素都是用rgba表示的，而涂抹过的区域是透明的，所以我们只需要判断alpha通道的值就可以知道是否透明。代码如下:

getTransparentPercent: function(ctx, width, height) { var imgData = ctx.getImageData(0, 0, width, height), pixles = imgData.data, transPixs = []; for (var i = 0, j = pixles.length; i < j; i += 4) { var a = pixles[i + 3]; if (a < 128) { transPixs.push(i); } } return (transPixs.length / (pixles.length / 4) * 100).toFixed(2); } （8）调用入口init

最后再提供一个入口用来进行绘制和重置，代码如下：

init: function (lottery, lotteryType) { this.lottery = lottery; this.lotteryType = lotteryType || 'image'; this.drawLottery(); }

至此，关键代码全部讲解完了。

 

延伸阅读：

返回到首页 返回到编程大巴

Win32

OpenGL

ASP.NET MVC

cocos2d-x

WCF

Linq

Android

QT

MFC

JQuery