css3 canvas之刮刮卡效果
今天我有时间学习了一下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>
效果图一：
效果图二：
