jQuery+html5实现彩票刮刮乐效果

我们利用HTML5的画布Canvas,结合其提供的API,在Canvas元素上绘制一个灰色蒙层,然后通过检测用户鼠标移到和手势来绘制一个透明的图形,这样就能看到Canvas背景下的真实图片,就达到刮刮卡效果。

HTML

<canvas></canvas>

首先禁止鼠标拖动,目的是让鼠标能在图片上实现刮彩票的效果。

var bodyStyle = document.body.style;  
bodyStyle.mozUserSelect = 'none';  
bodyStyle.webkitUserSelect = 'none';

然后实例化图片类,获取canvas画布,并设置背景为透明和定义position为absolute。下面用到2张随机图片作为演示模型,你也可以在imgs 里面加多个图片。

var img = new Image();  
var canvas = document.querySelector('canvas');  
canvas.style.backgroundColor='transparent';  
canvas.style.position = 'absolute';  
var imgs = ['p_0.jpg','p_1.jpg'];  
var num = Math.floor(Math.random()*2);  
img.src = imgs[num];

当监听到图片加载完的时候,需定义图片的相关属性和函数,函数layer()用来绘制一个灰色的正方形,eventDown()定义了按下事件eventUp()定义了松开事件,eventMove()定义了移动事件,其中当按下时,获取坐标位移,并通过arc(x, y, 10, 0, Math.PI * 2)来绘制小圆点。

img.addEventListener('load', function(e) {  
    var ctx;  
    var w = img.width,  
        h = img.height;  
    var offsetX = canvas.offsetLeft,  
        offsetY = canvas.offsetTop;  
    var mousedown = false;  
  
    function layer(ctx) {  
        ctx.fillStyle = 'gray';  
        ctx.fillRect(0, 0, w, h);  
    }  
  
    function eventDown(e){  
        e.preventDefault();  
        mousedown=true;  
    }  
  
    function eventUp(e){  
        e.preventDefault();  
        mousedown=false;  
    }  
  
    function eventMove(e){  
        e.preventDefault();  
        if(mousedown) {  
             if(e.changedTouches){  
                 e=e.changedTouches[e.changedTouches.length-1];  
             }  
             var x = (e.clientX + document.body.scrollLeft || e.pageX) - offsetX || 0,  
                 y = (e.clientY + document.body.scrollTop || e.pageY) - offsetY || 0;  
             with(ctx) {  
                 beginPath()  
                 arc(x, y, 10, 0, Math.PI * 2);//绘制圆点  
                 fill();  
             }  
        }  
    }  
  
    //...  
});

最后,通过canvas调用以上函数,绘制图形,并且侦听触控及鼠标事件,调用相应的函数,我们看下代码:

img.addEventListener('load', function(e) {  
    //..接上段代码  
    canvas.width=w;  
    canvas.height=h;  
    canvas.style.backgroundImage='url('+img.src+')';  
    ctx=canvas.getContext('2d');  
    ctx.fillStyle='transparent';  
    ctx.fillRect(0, 0, w, h);//绘制矩形  
    layer(ctx);  
  
    ctx.globalCompositeOperation = 'destination-out';  
  
    canvas.addEventListener('touchstart', eventDown);  
    canvas.addEventListener('touchend', eventUp);  
    canvas.addEventListener('touchmove', eventMove);  
    canvas.addEventListener('mousedown', eventDown);  
    canvas.addEventListener('mouseup', eventUp);  
    canvas.addEventListener('mousemove', eventMove);
恭喜,此资源为免费资源,请先
本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
打赏
下载价格:免费
下载说明:本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
0

评论0

请先

没有账号? 忘记密码?

社交账号快速登录