|
上午折腾了半天工作，快12点的时候闲下来了，于是花了10分钟写了个Canvas的刮刮卡。结果这不写不要紧，一写就停不下来了，下午一直在考虑优化的问题，又折腾了一个小时，才算是把自己优化的想法实现出来。书写出来和大家分享一下吧~！ Canvas其实是一个很好玩儿的东西，和JQ有些类似，拥有着一大堆的方法，但是关键不是把这些方法背下来，而是如何应用。接下来就以刮刮卡（彩票刮奖）特效为例，讲讲Canvas的用法，由于文章比较长，因此分成了上下文进行书写，第一篇文章为功能1和2，第二篇文章为第3部分，在第3部分关于刮痕面积计算方面，很感谢弘欣飞阳的提示~ 在博文中讲解的具体功能内容如下： 1、刮刮卡的基本功能实现； 2、如何实现圆形的刮痕； 3、进行刮痕面积的计算，如：刮掉了70%的内容区域，则全部显示出来，或者增加其他内容。
特效图： HTML5 Canvas 刮刮卡 刮奖特效 - 独行冰海 - 独行冰海
话不多说，进入我们的第一部分，实现基本的刮刮卡功能： 在进行制作之前，需要先进行基本结构以及画布的构建。 基本结构与样式： <head> <meta charset="UTF-8"> <title>刮刮卡特效 - 独行冰海</title> <link rel="stylesheet" href="reset.css"> <meta name="viewport" content="initial-scale=1.0, width=device-width,minimum-scale=1.0,maximum-scale=1.0, user-scalable=no" /> <style> .wrap { width: 320px; height: 400px; background: url('bac.jpg') 0 0 no-repeat; } </style> </head> <body> <div id="con" class="wrap"> <canvas id="myCanvas" width="320" height="400"></canvas> </div> </body>
设置元信息中的视口信息，让其能够在移动端设备中正常显示。之后设置一个div，背景图设置为底层图，在div当中放置一个等大小的canvas画布。 之后进行canvas画布的创建：（以下为JS） var myCanvas = document.getElementById('myCanvas'); var gray = myCanvas.getContext('2d');
1、基本功能实现 在Canvas画布当中绘制一个灰色层，将整个画布覆盖掉，使用如下命令即可： gray.beginPath(); gray.fillStyle = "#999"; gray.fillRect(0,0,320,400); gray.closePath();
之后我们只需要为画布绑定touch事件，在touchmove的时候进行画布的清除。 myCanvas.addEventListener('touchstart', function (e) { myCanvas.addEventListener('touchmove', function(e){ gray.clearRect(e.targetTouches[0].clientX, e.targetTouches[0].clientY, 30, 30); }); })
HTML5 Canvas 刮刮卡 刮奖特效 - 独行冰海 - 独行冰海 那么截止到当前，我们就实现了刮刮卡的基本功能。基本原理在于，绘制一个整体的层，然后点击的位置进行层的清除。不过，这种方法存在一个问题：清除时只能是正方形，看上去很不舒服，很希望能够使用圆形。于是便开始了第二种方法的思考。 欢迎沟通交流~独行冰海
2、实现圆形刮痕 如果想要实现圆形的形状，则必须使用arc的绘图方法。同时还需要使用到一个属性：globalCompositeOperation。该属性表示的是图形的组合方式。我们要使用到的是destination-out，它表示只绘制原图形与新图形不重叠的部分；原图形与新图形重叠的部分变透明。换句话说，就是我们在原有图形上进行绘制，覆盖的部分会变成透明的状态。于是乎，修改一下我们的JS代码： var myCanvas = document.getElementById('myCanvas'); var gray = myCanvas.getContext('2d'); gray.beginPath(); gray.fillStyle = "#999"; gray.fillRect(0,0,320,400); gray.closePath(); gray.globalCompositeOperation="destination-out";
myCanvas.addEventListener('touchstart', function (e) { myCanvas.addEventListener('touchmove', function(e){ gray.fillStyle = "#f00"; gray.arc(e.targetTouches[0].clientX, e.targetTouches[0].clientY, 20, 0, Math.PI*2); gray.fill(); }); })
此时，虽然能够实现出来，但是却存在了问题，就是由一个位置到另一个新的位置路径的变化会显示到页面中。此时对touchmove方法中的代码再做修改： gray.beginPath(); gray.fillStyle = "#f00"; gray.arc(e.targetTouches[0].clientX, e.targetTouches[0].clientY, 20, 0, Math.PI*2); gray.fill(); gray.closePath();
保证每一次都有开始和闭合路径（换句话说，就是防止路径互相影响）。那么截止到此，我们就能够实现圆形的擦痕了~
|