canvas教程

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

字号+ 作者:H5之家 来源:H5之家 2018-03-09 18:04 我要评论( )

1 script 2 window.onload= function (){ 3 var canvas=document.querySelector(‘canvas‘ ) 4 canvas.width= document.documentElement.clientWidth; (canvas.getContext){ 7 var ctx=canvas.getContext(‘2d‘ ) img= new Image(); 10 img.src="img/cover

1 <script> 2 window.onload=function(){ 3 var canvas=document.querySelector(‘canvas‘) 4 canvas.width=document.documentElement.clientWidth; (canvas.getContext){ 7 var ctx=canvas.getContext(‘2d‘) 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) touaddEventListener(‘touchstart‘) 19 touaddEventListener(‘touchmove‘) 20 } 21 function touaddEventListener(el){ 22 canvas.addEventListener(el,function(e){ 23 var ev=e||event 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>

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 2018前端学习知识点总结

    2018前端学习知识点总结

    2018-02-15 18:12

  • Firefox将增强帆布指纹追踪技术的防御能力

    Firefox将增强帆布指纹追踪技术的防御能力

    2017-12-06 12:52

  • 洛谷 P3379 【模板】最近公共祖先(LCA) 如题

    洛谷 P3379 【模板】最近公共祖先(LCA) 如题

    2017-12-01 11:00

  • Firefox将增强Canvas指纹追踪技术的防御能力

    Firefox将增强Canvas指纹追踪技术的防御能力

    2017-11-07 10:07

网友点评
-