html5 canvas 实现刮奖效果

来源:互联网 发布:淘宝生意参谋数据异常 编辑:程序博客网 时间:2024/03/28 23:42

使用html5 canvas 实现的刮奖 刮刮卡 效果


<!DOCTYPE html><html><head><meta charset="utf-8"/><title></title><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/><style type="text/css">html, body{ margin:0; padding: 0; height:100%; }#bd {position: relative;top: 0; left: 0;margin: 0 auto;width: 1024px; max-width: 100%; height: 100%;}#bd .pic {position: absolute;top: 0; left: 0; z-index: 1;width: 100%; height: 100%;background: url(./static/img/porsche.jpg) no-repeat center;background-size: cover;}#bd canvas {position: absolute;top: 0; left: 0; z-index: 9;cursor: pointer;}</style></head><body><div id="bd"><div class="pic"></div></div><script type="text/javascript">(function(){var bd = document.getElementById('bd'),cvs = null,ctx = null,preX = null,preY = null,isMobile = (function(){var ua = navigator.userAgent;var reg = /iPod|iPad|iPhone|Android|Windows Phone|Symbian/i;return reg.test(ua);})();try {document.createElement('canvas').getContext('2d');} catch (e) {alert('您的设备不支持刮刮卡效果哦~!');return; // 设备不支持,停止运行}init(); // 执行初始化操作function init(){var w = bd.clientWidth,h = bd.clientHeight;if(!cvs){cvs = document.createElement('canvas');bd.appendChild(cvs);ctx = cvs.getContext('2d');}cvs.width = w;cvs.height = h;ctx.globalCompositeOperation = 'source-over'; // 默认值ctx.fillStyle="rgba(0,0,0,.8)";ctx.fillRect(0,0, w, h);ctx.globalCompositeOperation = 'destination-out'; //}ctx.fillCircle = function(x, y, radius, fillColor){this.fillStyle = fillColor;this.beginPath();this.arc(x, y, radius, 0, Math.PI*2);this.closePath();this.fill();};ctx.fillArea = function(preX, preY, nextX, nextY, radius, fillColor){var b3, deltaX, deltaY;b3 = Math.sqrt((nextX-preX)*(nextX-preX) + (nextY-preY)*(nextY-preY));deltaX = Math.ceil( ( radius*(nextY-preY) )/b3 );deltaY = Math.ceil( ( radius*(preX-nextX) )/b3 );this.fillStyle = fillColor;this.beginPath();this.moveTo( preX +deltaX, preY +deltaY);this.lineTo( nextX+deltaX, nextY+deltaY);this.lineTo( nextX-deltaX, nextY-deltaY);this.lineTo( preX -deltaX, preY -deltaY);this.lineTo( preX +deltaX, preY +deltaY);this.closePath();this.fill();};// 绑定事件,由于canvas需要IE9+的现代浏览器,所以绑定事件没有必要兼容IE的attachEvent方法cvs.addEventListener(isMobile ? 'touchstart' : 'mousedown', function(e){preX = isMobile ? e.changedTouches[0].pageX : e.pageX;preY = isMobile ? e.changedTouches[0].pageY : e.pageY;preX -= bd.offsetLeft;preY -= bd.offsetTop;ctx.fillCircle(preX, preY, 20, '#000');}, false);cvs.addEventListener(isMobile ? 'touchend' : 'mouseup', function(e){preX = null;preY = null;}, false);cvs.addEventListener(isMobile ? 'touchmove' : 'mousemove', function(e){e.preventDefault(); // 去除移动端触摸时的默认行为,禁止了页面的滚动if(preX === null || preY === null){return;}var x = isMobile ? e.changedTouches[0].pageX : e.pageX, // IE8及以下不支持pageX,不过在这也不需要兼容y = isMobile ? e.changedTouches[0].pageY : e.pageY,r = 20;x -= bd.offsetLeft;y -= bd.offsetTop;ctx.fillCircle(preX, preY, 20, '#000');ctx.fillCircle(x, y, 20, '#000');ctx.fillArea(preX, preY, x, y, r, '#000');preX = x;preY = y;}, false);window.addEventListener('resize',function(){init();}, false);})();</script> </body></html>


0 0
原创粉丝点击