HTML5 Canvas实战之刮奖效果
作者： 发布日期：2014-03-04 21:23:18
Tag标签：HTML5 Canvas 实战
近年来由于移动设备对HTML5的较好支持，经常有活动用刮奖的效果，最近也在看H5方面的内容，就自己实现了一个，现分享出来跟大家交流。
1、效果2、原理
原理很简单，就是在刮奖区添加两个canvas，第一个canvas用于显示刮开后显示的内容，可以是一张图片或一个字符串，第二个canvas用于显示涂层，可以用一张图片或用纯色填充，第二个canvas覆盖在第一个canvas上面。
当在第二个canvas上点击或涂抹（点击然后拖动鼠标）时，把点击区域变为透明，这样就可以看到第一个canvas上的内容，即实现了刮奖效果。
3、实现 （1）定义Lottery类 function Lottery(id, cover, coverType, width, height, drawPercentCallback) { this.conId = id; this.conNode = document.getElementById(this.conId); this.cover = cover || '#CCC'; this.coverType = coverType || 'color'; this.background = null; this.backCtx = null; this.mask = null; this.maskCtx = null; this.lottery = null; this.lotteryType = 'image'; this.width = width || 300; this.height = height || 100; this.clientRect = null; this.drawPercentCallback = drawPercentCallback; }对参数解释一下：
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上下文 this.background = this.background || this.createElement('canvas', { style: 'position:absolute;left:0;top:0;' }); this.mask = this.mask || this.createElement('canvas', { style: 'position:absolute;left:0;top:0;' }); if (!this.conNode.innerHTML.replace(/[wW]| /g, '')) { this.conNode.appendChild(this.background); this.conNode.appendChild(this.mask); this.clientRect = this.conNode ? this.conNode.getBoundingClientRect() : null; this.bindEvent(); } this.backCtx = this.backCtx || this.background.getContext('2d'); this.maskCtx = this.maskCtx || this.mask.getContext('2d');这里用于了createElement工具方法，另外还绑定了事件，后面介绍。
（3）绘制第一个canvas第一个canvas分两种类型，image 和 string，如果是图片直接用canvas的drawImage就可以了，如果是string，要先用白色填充，然后在上下左右居中的地方绘制字符串，代码如下：
if (this.lotteryType == 'image') { var image = new Image(), _this = this; image.onload = function () { _this.width = this.width; _this.height = this.height; _this.resizeCanvas(_this.background, this.width, this.height); _this.backCtx.drawImage(this, 0, 0); } image.src = this.lottery; } else if (this.lotteryType == 'text') { this.width = this.width; this.height = this.height; this.resizeCanvas(this.background, this.width, this.height); this.backCtx.save(); this.backCtx.fillStyle = '#FFF'; this.backCtx.fillRect(0, 0, this.width, this.height); this.backCtx.restore(); this.backCtx.save(); var fontSize = 30; this.backCtx.font = 'Bold ' + fontSize + 'px Arial'; this.backCtx.textAlign = 'center'; this.backCtx.fillStyle = '#F60'; this.backCtx.fillText(this.lottery, this.width / 2, this.height / 2 + fontSize / 2); this.backCtx.restore(); } （4）绘制第二个canvas第二个canvas也分 image 或 color 填充两种情况。
这里有一个难点，就是如何把鼠标点击区域变成透明的呢？答案在这里：https://developer.mozilla.org/en/docs/Web/Guide/HTML/Canvas_tutorial/Compositing
即我们要把 maskCtx的 globalCompositeOperation 设置为 destination-out ，详细的用法请参考上面给出的链接。
因此，绘制第二个canvas的代码如下：
this.resizeCanvas(this.mask, this.width, this.height); if (this.coverType == 'color') { this.maskCtx.fillStyle = this.cover; this.maskCtx.fillRect(0, 0, this.width, this.height); this.maskCtx.globalCompositeOperation = 'destination-out'; } else if (this.coverType == 'image'){ var image = new Image(), _this = this; image.onload = function () { _this.maskCtx.drawImage(this, 0, 0); _this.maskCtx.globalCompositeOperation = 'destination-out'; } image.src = this.cover; }这里resizeCanvas是改变canvas大小的工具方法。
（5）绑定事件绘制完成后，要给第二个canvas绑定事件。这里分了移动设备和PC-WEB两处情况。移动设备是 touchstart 和 touchmove 事件，对应的PC-WEB是keydown 和 mousemove事件，另外PC-WEB方式下，要给document绑定一个mouseup事件，用来判断鼠标是否按下。代码如下：
bindEvent: function () { var _this = this; var device = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase())); var clickEvtName = device ? 'touchstart' : 'mousedown'; var moveEvtName = device? 'touchmove': 'mousemove'; if (!device) { var isMouseDown = false; document.addEventListener('mouseup', function(e) { isMouseDown = false; }, false); } this.mask.addEventListener(clickEvtName, function (e) { isMouseDown = true; var docEle = document.documentElement; if (!_this.clientRect) { _this.clientRect = { left: 0, top:0 }; } var x = (device ? e.touches[0].clientX : e.clientX) - _this.clientRect.left + docEle.scrollLeft - docEle.clientLeft; var y = (device ? e.touches[0].clientY : e.clientY) - _this.clientRect.top + docEle.scrollTop - docEle.clientTop; _this.drawPoint(x, y); }, false); this.mask.addEventListener(moveEvtName, function (e) { if (!device && !isMouseDown) { return false; } var docEle = document.documentElement; if (!_this.clientRect) { _this.clientRect = { left: 0, top:0 }; } var x = (device ? e.touches[0].clientX : e.clientX) - _this.clientRect.left + docEle.scrollLeft - docEle.clientLeft; var y = (device ? e.touches[0].clientY : e.clientY) - _this.clientRect.top + docEle.scrollTop - docEle.clientTop; _this.drawPoint(x, y); }, false); }这里在事件中取出了鼠标坐标，调用了drawPoint进行了绘制，下面会讲到。
（6）绘制点击和涂抹区域
相关文章
精彩导读
热门资讯
关注我们
