开发者社区> 杰克.陈> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

使用HTML5实现刮刮卡效果

简介: 原文 使用HTML5实现刮刮卡效果 你玩过刮刮卡么?一不小心可以中奖的那种。今天我给大家分享一个基于HTML5技术实现的刮刮卡效果,在PC上只需按住鼠标,在手机上你只需按住指头,轻轻刮去图层就可以模拟真实的刮奖效果。
+关注继续查看

原文 使用HTML5实现刮刮卡效果

你玩过刮刮卡么?一不小心可以中奖的那种。今天我给大家分享一个基于HTML5技术实现的刮刮卡效果,在PC上只需按住鼠标,在手机上你只需按住指头,轻轻刮去图层就可以模拟真实的刮奖效果。

           

                       

           

         

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

HTML

我们只需要在页面中加入canvas标签元素,其他的就看javascript的了。注意canvas元素是HTML5才有的元素,运行在支持HTML5的现代浏览器上。

<canvas></canvas> 

Javascript

首先,我们要禁用页面的鼠标选中拖动的事件,就是不运行执行选中操作。

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

接着我们定义图片类,获取canvas元素,并设置背景和位置属性。我们在本例中用到两张随机照片,每次刷新随机一张图片作为背景。

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); 

你可以下载DEMO中的完整的代码,你可以根据实际需求,结合后台程序与数据库,完成一个真正的刮刮卡程序。
声明:本文为原创文章,helloweba.com和作者拥有版权,如需转载,请注明来源于helloweba.com并保留原文链接,否则视为侵权。

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
【前端面试知识题】- 3. HTML && CSS
它是Web应用程序的传输协议,提供了双向的、按序到达的数据流。它是HTML5新増的协议, WebSocket的连接是持久的,它在客户端和服务器之间保持双工连接,服务器的更新可以及时推送到客户端,而不需要客户端以一定的时间间隔去轮询。
0 0
HTML之文本格式化、链接、头部、CSS(笔记小结)
HTML之文本格式化、链接、头部、CSS(笔记小结)
0 0
【前端】css布局html页面之inline-block布局错位解决方法
本篇文章中,主要讲讲前端布局的情况 对于,对于刚接触前端开发的小伙伴来说,布局是一个比较重要的知识点,如果知识点理解不到位,那么很容易出现布局错位的情况
0 0
通过DOM对HTML文档的元素内容和CSS样式进行操作
通过DOM对HTML文档的元素内容和CSS样式进行操作 通过前面的学习我们应该可以了解到,通过DOM我们可以操作HTMl文档中的任意的元素及属性,文本内容。其实实际工作中我们用到最多的是怎样通过DOM操作HTML文档中的CSS样式。 HTML代码: <button id="btn">切换</button> <div class="wrap" id="wrap" style="color: yellow;"> <p id="text" class="text">这是一个段落</p> <ul class="list">
0 0
前端三要素:HTML、CSS、JavaScript介绍以及三者的关系理解
前端三要素:HTML、CSS、JavaScript介绍以及三者的关系理解
0 0
用HTML+CSS构建一个绚丽的登录页面
自动切换背景,登录页面,水滴效果,绚丽的登录页面
0 0
HTML+CSS实现商品介绍模考(以Apple14为案例)
本文以最通俗易懂的语言为读者提供一个经典CSS小案例,商品介绍模块,并且结合时事,以Apple14为案例进行讲解。
0 0
实训-利用HTML+CSS制作某米官网首页(二)
实训-利用HTML+CSS制作某米官网首页
0 0
实训-利用HTML+CSS制作某米官网首页(一)
实训-利用HTML+CSS制作某米官网首页
0 0
实训-利用HTML+CSS做响应式项目网页
实训-利用HTML+CSS做响应式项目网页
0 0
+关注
杰克.陈
一个安静的程序猿~
文章
问答
文章排行榜
最热
最新
相关电子书
更多
天猫 HTML5 互动技术实践
立即下载
天猫HTML5互动技术实践
立即下载
《零基础HTML入门教程》
立即下载