canvas学习之刮刮卡(还需要优化)

Posted mhxy13867806343

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了canvas学习之刮刮卡(还需要优化)相关的知识,希望对你有一定的参考价值。

技术分享图片

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">  
    
    
    </head>
    <body>
        <div id="wrap">
            <div></div>
            <canvas></canvas>
        </div>
    </body>

</html>

 

 1 <style type="text/css">
 2             *{
 3                 margin: 0;
 4                 padding: 0;
 5             }
 6             html,body{
 7                 height: 100%;
 8                 overflow: hidden;
 9             }
10             #wrap{
11                 height: 100%;
12                 overflow: hidden;
13             }
14             #wrap > div{
15                 height: 100%;
16                 background: url(img/gg.jpg) no-repeat;
17                 background-size:100% 100% ;
18             }
19             canvas{
20                 position: absolute;
21                 left: 0;
22                 top: 0;
23             }
24         </style>
 1     <script>
 2         window.onload=function(){
 3             var canvas=document.querySelector(‘canvas‘)
 4             canvas.width=document.documentElement.clientWidth;
 5             canvas.height=document.documentElement.clientHeight;//视口
 6             if(canvas.getContext){
 7                 var ctx=canvas.getContext(‘2d‘)
 8                 //引入图片
 9                 var img=new Image();
10                 img.src="img/cover.jpg";
11                 img.onload=function(){
12                     drap(ctx,img)
13                 }
14             }
15             function drap(ctx,img){
16                 ctx.drawImage(img,0,0,canvas.width,canvas.height)
17                 //移动端手指
18                 touaddEventListener(‘touchstart‘)
19                 touaddEventListener(‘touchmove‘)
20             }
21             function touaddEventListener(el){
22                     canvas.addEventListener(el,function(e){
23                     var ev=e||event
24                     //手指
25                     var touchC=ev.changedTouches[0]
26                     var x=touchC.clientX;
27                     var y=touchC.clientY;
28                     ctx.save()
29                     ctx.beginPath()
30                     ctx.globalCompositeOperation=‘destination-out‘
31                     ctx.arc(x,y,20,0,360*Math.PI/180)
32                     ctx.fill()
33                     ctx.restore()
34                 })
35             }
36             
37         }
38         
39     </script>

 

以上是关于canvas学习之刮刮卡(还需要优化)的主要内容,如果未能解决你的问题,请参考以下文章

canvas刮刮效果实现

移动端Touch事件与H5-Canvas像素点检测实现刮刮乐

canvas学习之折线图

H5 Canvas刮刮乐

canvas实现刮刮乐

canvas学习之粒子动画