HTML5 Canvas刮刮卡效果 实例

近年来由于移动设备对HTML5的较好支持，经常有活动用刮奖的效果，最近也在看H5方面的内容，就自己实现了一个，现分享出来跟大家交流。
1、效果

2、原理

原理很简单，就是在刮奖区添加两个canvas，第一个canvas用于显示刮开后显示的内容，可以是一张图片或一个字符串，第二个canvas用于显示涂层，可以用一张图片或用纯色填充，第二个canvas覆盖在第一个canvas上面。

当在第二个canvas上点击或涂抹（点击然后拖动鼠标）时，把点击区域变为透明，这样就可以看到第一个canvas上的内容，即实现了刮奖效果。

3、实现（1）定义Lottery类

1. function Lottery(id, cover, coverType, width, height, drawPercentCallback) {
   
2.     this.conId = id;
   
3.     this.conNode = document.getElementById(this.conId);
   
4.     this.cover = cover || '#CCC';
   
5.     this.coverType = coverType || 'color';
   
6.     this.background = null;
   
7.     this.backCtx = null;
   
8.     this.mask = null;
   
9.     this.maskCtx = null;
   
10.     this.lottery = null;
    
11.     this.lotteryType = 'image';
    
12.     this.width = width || 300;
    
13.     this.height = height || 100;
    
14.     this.clientRect = null;
    
15.     this.drawPercentCallback = drawPercentCallback;
    
16. }

复制代码

对参数解释一下：

• id：刮奖容器的id
• cover：涂层内容，可以为图片地址或颜色值，可空，默认为 #ccc
• coverType：涂层类型，值为 image 或 color，可空，默认为 color
• width：刮奖区域宽度，默认为300px，可空
• height：刮奖区域高度，默认为100px，可空
• drawPercentCallback：刮开的区域百分比回调，可空
  

然后还定义了几个需要用到的变量：

• background：第一个canvas元素
• backCtx：background元素的2d上下文（context）
• mask：第二个canvas元素
• maskCtx：mask元素的2d上下文（context）
• lottery：刮开后显示的内容，可以为图片地址或字符串
• lotteryType：刮开后显示的内容类型，值为 image 或 text，要跟lottery匹配
• clientRect：用于记录mask元素的 getBoundingClientRect() 值
  

（2）添加二个canvas到刮奖容器，并获取2d上下文

1. this.background = this.background || this.createElement('canvas', {
   
2.     style: 'position:absolute;left:0;top:0;'
   
3. });
   
4. this.mask = this.mask || this.createElement('canvas', {
   
5.     style: 'position:absolute;left:0;top:0;'
   
6. });
   
7. 
   
8. if (!this.conNode.innerHTML.replace(/[\w\W]| /g, '')) {
   
9.     this.conNode.appendChild(this.background);
   
10.     this.conNode.appendChild(this.mask);
    
11.     this.clientRect = this.conNode ? this.conNode.getBoundingClientRect() : null;
    
12.     this.bindEvent();
    
13. }
    
14. 
    
15. this.backCtx = this.backCtx || this.background.getContext('2d');
    
16. this.maskCtx = this.maskCtx || this.mask.getContext('2d');

复制代码

这里用于了createElement工具方法，另外还绑定了事件，后面介绍。

（3）绘制第一个canvas

第一个canvas分两种类型，image 和 string，如果是图片直接用canvas的drawImage就可以了，如果是string，要先用白色填充，然后在上下左右居中的地方绘制字符串，代码如下：

1. if (this.lotteryType == 'image') {
   
2.     var image = new Image(),
   
3.         _this = this;
   
4.     image.onload = function () {
   
5.         _this.width = this.width;
   
6.         _this.height = this.height;
   
7.         _this.resizeCanvas(_this.background, this.width, this.height);
   
8.         _this.backCtx.drawImage(this, 0, 0);
   
9.     }
   
10.     image.src = this.lottery;
    
11. } else if (this.lotteryType == 'text') {
    
12.     this.width = this.width;
    
13.     this.height = this.height;
    
14.     this.resizeCanvas(this.background, this.width, this.height);
    
15.     this.backCtx.save();
    
16.     this.backCtx.fillStyle = '#FFF';
    
17.     this.backCtx.fillRect(0, 0, this.width, this.height);
    
18.     this.backCtx.restore();
    
19.     this.backCtx.save();
    
20.     var fontSize = 30;
    
21.     this.backCtx.font = 'Bold ' + fontSize + 'px Arial';
    
22.     this.backCtx.textAlign = 'center';
    
23.     this.backCtx.fillStyle = '#F60';
    
24.     this.backCtx.fillText(this.lottery, this.width / 2, this.height / 2 + fontSize / 2);
    
25.     this.backCtx.restore();
    
26. }

复制代码

（4）绘制第二个canvas

第二个canvas也分 image 或 color 填充两种情况。

这里有一个难点，就是如何把鼠标点击区域变成透明的呢？答案在这里： https://developer.mozilla.org/en/docs/Web/Guide/HTML/Canvas_tutorial/Compositing

即我们要把 maskCtx的 globalCompositeOperation 设置为 destination-out ，详细的用法请参考上面给出的链接。

因此，绘制第二个canvas的代码如下：

1. this.resizeCanvas(this.mask, this.width, this.height);
   
2. if (this.coverType == 'color') {
   
3.     this.maskCtx.fillStyle = this.cover;
   
4.     this.maskCtx.fillRect(0, 0, this.width, this.height);
   
5.     this.maskCtx.globalCompositeOperation = 'destination-out';
   
6. } else if (this.coverType == 'image'){
   
7.     var image = new Image(),
   
8.         _this = this;
   
9.     image.onload = function () {
   
10.         _this.maskCtx.drawImage(this, 0, 0);
    
11.         _this.maskCtx.globalCompositeOperation = 'destination-out';
    
12.     }
    
13.     image.src = this.cover;
    
14. }

复制代码

这里resizeCanvas是改变canvas大小的工具方法。

（5）绑定事件

绘制完成后，要给第二个canvas绑定事件。这里分了移动设备和PC-WEB两处情况。移动设备是 touchstart 和 touchmove 事件，对应的PC-WEB是keydown 和 mousemove事件，另外PC-WEB方式下，要给document绑定一个mouseup事件，用来判断鼠标是否按下。代码如下：

1. bindEvent: function () {
   
2.     var _this = this;
   
3.     var device = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));
   
4.     var clickEvtName = device ? 'touchstart' : 'mousedown';
   
5.     var moveEvtName = device? 'touchmove': 'mousemove';
   
6.     if (!device) {
   
7.         var isMouseDown = false;
   
8.         document.addEventListener('mouseup', function(e) {
   
9.             isMouseDown = false;
   
10.         }, false);
    
11.     }
    
12.     this.mask.addEventListener(clickEvtName, function (e) {
    
13.         isMouseDown = true;
    
14.         var docEle = document.documentElement;
    
15.         if (!_this.clientRect) {
    
16.             _this.clientRect = {
    
17.                 left: 0,
    
18.                 top:0
    
19.             };
    
20.         }
    
21.         var x = (device ? e.touches[0].clientX : e.clientX) - _this.clientRect.left + docEle.scrollLeft - docEle.clientLeft;
    
22.         var y = (device ? e.touches[0].clientY : e.clientY) - _this.clientRect.top + docEle.scrollTop - docEle.clientTop;
    
23.         _this.drawPoint(x, y);
    
24.     }, false);
    
25. 
    
26.     this.mask.addEventListener(moveEvtName, function (e) {
    
27.         if (!device && !isMouseDown) {
    
28.             return false;
    
29.         }
    
30.         var docEle = document.documentElement;
    
31.         if (!_this.clientRect) {
    
32.             _this.clientRect = {
    
33.                 left: 0,
    
34.                 top:0
    
35.             };
    
36.         }
    
37.         var x = (device ? e.touches[0].clientX : e.clientX) - _this.clientRect.left + docEle.scrollLeft - docEle.clientLeft;
    
38.         var y = (device ? e.touches[0].clientY : e.clientY) - _this.clientRect.top + docEle.scrollTop - docEle.clientTop;
    
39.         _this.drawPoint(x, y);
    
40.     }, false);
    
41. }

复制代码

这里在事件中取出了鼠标坐标，调用了drawPoint进行了绘制，下面会讲到。

（6）绘制点击和涂抹区域

这里用到了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通道的值就可以知道是否透明。代码如下:

1. getTransparentPercent: function(ctx, width, height) {
   
2.     var imgData = ctx.getImageData(0, 0, width, height),
   
3.         pixles = imgData.data,
   
4.         transPixs = [];
   
5.     for (var i = 0, j = pixles.length; i < j; i += 4) {
   
6.         var a = pixles[i + 3];
   
7.         if (a < 128) {
   
8.             transPixs.push(i);
   
9.         }
   
10.     }
    
11.     return (transPixs.length / (pixles.length / 4) * 100).toFixed(2);
    
12. }

复制代码

8）调用入口init

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

1. init: function (lottery, lotteryType) {
   
2.     this.lottery = lottery;
   
3.     this.lotteryType = lotteryType || 'image';
   
4.     this.drawLottery();
   
5. }

复制代码