绝对值得看的来篇，哈哈。本人亲自完成，有错误请大家指出： 现在的手机完美支持html5,所以如果手机端想要做个抽奖模块的话,用刮刮卡抽奖效果,相信这个互动体验是非常棒的 ps:由于本人没有wp8系统的手机,所以没法兼容wp8系统的,目前完美兼容android,IOS 如果要在pc浏览的话，得改下js,目前支持谷歌，火狐，ie>=10,如果网友想要的话我就去写个 代码如下: 复制代码 代码如下: eraser effect <BR>#canvas { <BR>background:url(winning-ticket.jpg);<!--奖品图片--> <BR>width: 531px; <BR>height: 438px; <BR>} <BR>.before{ <BR>background:none !important; <BR>} <BR>#canvas canvas { <BR>cursor: url("hand.png") 0 0, auto;<!--PC端的手势图片--> <BR>} <BR> <BR>(function() { <BR>window.onload = function(){ <BR>/**判断浏览器是否支持canvas**/ <BR>try{ <BR>document.createElement('canvas').getContext('2d'); <BR>}catch(e){ <BR>var addDiv = document.createElement('div'); <BR>alert('您的手机不支持刮刮卡效果哦~!'); <BR>} <BR>}; <BR>var u = navigator.userAgent,mobile = ''; <BR>if(u.indexOf('iPhone') > -1) mobile = 'iphone'; <BR>if(u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) mobile = 'Android'; <BR>function createCanvas(parent, width, height) { <BR>var canvas = {}; <BR>canvas.node = document.createElement('canvas'); <BR>canvas.context = canvas.node.getContext('2d'); <BR>canvas.node.width = width || 100; <BR>canvas.node.height = height || 100; <BR>parent.appendChild(canvas.node); <BR>return canvas; <BR>} <BR>function init(container, width, height, fillColor, type) { <BR>var canvas = createCanvas(container, width, height); <BR>var ctx = canvas.context; <BR>// define a custom fillCircle method <BR>ctx.fillCircle = function(x, y, radius, fillColor) { <BR>this.fillStyle = fillColor; <BR>this.beginPath(); <BR>this.moveTo(x, y); <BR>this.arc(x, y, radius, 0, Math.PI * 2, false); <BR>this.fill(); <BR>}; <BR>ctx.clearTo = function(fillColor) { <BR>ctx.fillStyle = fillColor; <BR>ctx.fillRect(0, 0, width, height); <BR>}; <BR>ctx.clearTo(fillColor || "#ddd"); <BR>canvas.node.addEventListener("touchstart",function(e){ <BR>canvas.isDrawing = true; <BR>},false); <BR>canvas.node.addEventListener("touchend",function(e){ <BR>canvas.isDrawing = false; <BR>},false); <BR>canvas.node.addEventListener("touchmove",function(e){ <BR>if (!canvas.isDrawing) { <BR>return; <BR>} <BR>if(type == 'Android'){ <BR>var x = e.changedTouches[0].pageX - this.offsetLeft; <BR>var y = e.changedTouches[0].pageY - this.offsetTop; <BR>}else{ <BR>var x = e.pageX - this.offsetLeft; <BR>var y = e.pageY - this.offsetTop; <BR>} <BR>var radius = 20; <BR>var fillColor = '#ff0000'; <BR>ctx.globalCompositeOperation = 'destination-out'; <BR>ctx.fillCircle(x, y, radius, fillColor); <BR>},false); <BR>} <BR>var container = document.getElementById('canvas'); <BR>init(container, 531, 438, '#ff0000', mobile); <BR>})(); <BR>
