html5 canvas手机刮刮卡抽奖特效免费下载

html5 canvas制作的手机刮刮卡抽奖特效,简单的刮刮乐代码,设置一张图片为遮罩背景,在手机上用手指刮开,一点点显示背景图片看中奖结果。注:用手机打开查看演示。

JS代码

<script type="text/javascript"> 
window.onload = function(){ 
    var body = document.querySelector("body"); 
    var img = new Image(); 
    var canvas = document.querySelector("canvas"); 
    body.userSelect = "none"; 
    img.src = "1.jpg"; 
    canvas.style.backgroundImage='url('+img.src+')'; 
    canvas.style.position = 'absolute'; 
    img.addEventListener("load",function(){ 
        var ctx; 
        var w = img.width, 
            h = img.height; 
        function layer(ctx){ 
            ctx.fillStyle = "gray"; 
            ctx.fillRect(0, 0, w, h) 
        } 
        canvas.width = w; 
        canvas.height = h; 
        ctx=canvas.getContext('2d');//表示在画布上的描绘环境 
        layer(ctx); //描绘顶层的灰色图层 
        ctx.globalCompositeOperation="destination-out"; 
        ctx.lineWidth=20 
        ctx.lineCap="round" 
        ctx.lineJoin="round"; 
        ctx.font = "40px Arial" 
        ctx.fillText("刮开有惊喜", 100, 100); 
        ctx.fillStyle = "red"; 
        var startX,startY,endX,endY; 
        canvas.addEventListener("touchstart",function(e){ 
            startX = e.targetTouches[0].pageX; 
            startY = e.targetTouches[0].pageY; 
            ctx.moveTo(startX, startY); 
 
        }) 
        canvas.addEventListener("touchmove",function(e){ 
            endX = e.targetTouches[0].pageX; 
            endY = e.targetTouches[0].pageY; 
            ctx.lineTo(endX,endY);  
            ctx.stroke(); 
        }) 
    }) 
    
} 
</script>
恭喜,此资源为免费资源,请先
本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
打赏
下载价格:免费
下载说明:本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
0

评论0

请先

没有账号? 忘记密码?

社交账号快速登录