css3 canvas之刮刮卡效果

浏览数：27 / 时间：2015年06月09日

　　　今天我有时间学习了一下html5新增的这个标签canvas，以前虽然经常写html5网页，可是都没用过这个标签。最近刚弄了一个技术分享 h5微信送祝福的网页，差不多折腾了一个星期，所以我觉得我得系统的来学习一下html5和css3了。

好了，废话不多说，下面贴出我的代码。

  1 <!DOCTYPE html>
  2 <html>
  3 <head lang="en">
  4     <meta charset="UTF-8">
  5     <title>刮刮卡效果</title>
  6     <style type="text/css">
  7         body{
  8             width: 1000px;
  9             height: 600px;
 10             overflow: hidden;
 11             margin: 0;
 12         }
 13         #myCanvas{
 14             background: url(img/slide2.jpg) ;
 15             background-size: cover;
 16             width: 1000px;
 17             height: 600px;
 18             overflow: hidden;
 19         }
 20     </style>
 21 </head>
 22 <body>
 23 <div id="myCanvas" ></div>
 24 </body>
 25 <script>
 26     (function(){
 27 
 28         window.onload=function(){
 29             document.ontouchmove=function(e){
 30                 e.preventDefault();//阻止默认的滚动事件
 31             };
 32             //检测浏览器是否支持canvas标签
 33             try{
 34                 document.createElement("canvas").getContext(‘2d‘);
 35             }catch (e){
 36                 alert(‘您的手机不支持刮刮卡效果‘);
 37             }
 38         };
 39         var u=navigator.userAgent;
 40         var mobile=‘pc‘;
 41 
 42         if(u.indexOf(‘iphone‘)>-1){
 43             mobile=‘iphone‘;
 44         }
 45         if(u.indexOf(‘Android‘)>-1|| u.indexOf(‘linux‘)>-1){
 46             mobile=‘Android‘;
 47         }
 48         //创建一个canvas标签
 49         function createCanvas(parent,width,height){
 50             var canvas={};
 51             canvas.node=document.createElement("canvas");
 52             canvas.context=canvas.node.getContext(‘2d‘);
 53             canvas.node.width=width||1000;
 54             canvas.node.height=height||600;
 55             parent.appendChild(canvas.node);
 56             return canvas;
 57         }
 58         function init(container,width,height,fillcolor,type){
 59             var canvas=createCanvas(container,width,height);
 60             var ctx=canvas.context;
 61             ctx.fillCircle=function(x,y,radius,fillcolor){
 62                 this.fillStyle=fillcolor;
 63                 this.beginPath();
 64                 this.moveTo(x,y);
 65                 this.arc(x,y,radius,0,Math.PI*2,false);
 66                 this.fill();
 67             };
 68             ctx.clearTo=function(fillcolor){
 69                 ctx.fillStyle=fillcolor;
 70                 ctx.fillRect(0,0,width,height);
 71             };
 72             ctx.clearTo(fillcolor||"#ddd");
 73             canvas.node.addEventListener(mobile=="pc"?"mousedown":"touchstart",function(e){
 74                 canvas.isDrawing=true;
 75             },false);
 76             canvas.node.addEventListener(mobile=="pc"?"mouseup":"touchend",function(e){
 77                 canvas.isDrawing=false;
 78             },false);
 79             canvas.node.addEventListener(mobile=="pc"?"mousemove":"touchmove",function(e){
 80                 if(!canvas.isDrawing){return;}
 81                 if(type=="Android"){
 82                     var x= e.changedTouches[0].pageX-this.offsetLeft;
 83                     var y= e.changedTouches[0].pageY-this.offsetTop;
 84                 }else{
 85                     var x= e.pageX-this.offsetLeft;
 86                     var y= e.pageY-this.offsetTop;
 87                 }
 88                 var radius=20;
 89                 var fillcolor="#ff0000";
 90                 //在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。
 91                 ctx.globalCompositeOperation="destination-out";
 92                 ctx.fillCircle(x,y,radius,fillcolor);
 93             },false);
 94         }
 95         var container=document.getElementById(‘myCanvas‘);
 96         init(container,1000,600,"#696868",mobile);
 97     })();
 98 
 99 
100 </script>
101 </html>