前端开发javascript|前端开发者 html 代码 <!DOCTYPE html><br /> <html><br /> <head><br /> <meta charset=”utf-8″/><br /> <title></title><br /> <style><br /> .demo{<br /> width: 320px;<br /> margin: 100px auto;<br /> }<br /> </style><br /> </head><br /> <body><br /> <div class=”main”><br /> <div class=”demo”><br /> <canvas></canvas><br /> </div><br /> </div><br /> <script></p> <p> var image=new Image();<br /> var canvas=document.querySelector(“canvas”);</p> <p> var images=[“http://xusong.xn--6qq986b3xl/p_0.jpg”,”http://xusong.xn--6qq986b3xl/p_1.jpg”];<br /> var num=Math.floor(Math.random()*images.length);</p> <p> image.src=images[num];</p> <p> image.addEventListener(“load”,function(e){//在移动端上必须用DOM2级事件,才能用鼠标等事件<br /> var ctx;<br /> var w=image.width;<br /> var h=image.height;<br /> var offsetX=canvas.offsetLeft;//获取画布在浏览器视口的偏移量<br /> var offsetY=canvas.offsetTop;<br /> var flag=false;<br /> function eventDown(){<br /> e.preventDefault();//阻止鼠标默认事件<br /> flag=true;<br /> }<br /> function eventUp(){<br /> e.preventDefault();<br /> flag=false;<br /> }<br /> function layout(ctx){<br /> ctx.fillStyle = “gray”;//在画布上加上一个图层,用来遮盖<br /> ctx.fillRect(0,0,w,h);<br /> }<br /> function eventMove(e){<br /> e.preventDefault();<br /> if(flag){<br /> if(e.changedTouches){//获取手势操作对象<br /> e= e.changedTouches[e.changedTouches.length-1];<br /> }<br /> var x= (e.clientX+document.body.scrollLeft|| e.pageX)-offsetX;<br /> var y= (e.clientY+document.body.scrollTop|| e.pageY)-offsetY;<br /> with (ctx){//判断当前对象<br /> beginPath();<br /> arc(x,y,30,0,Math.PI*2);<br /> fill();<br /> }<br /> }<br /> }</p> <p> canvas.width=w;<br /> canvas.height=h;<br /> canvas.style.backgroundImage=”url(“+image.src+”)”;</p> <p> ctx=canvas.getContext(“2d”);<br /> ctx.fillRect(0,0,w,h);<br /> layout(ctx);</p> <p> ctx.globalCompositeOperation = “destination-out”;//遮盖行为</p> <p> //pc端<br /> canvas.addEventListener(“mousedown”,eventDown);<br /> canvas.addEventListener(“mouseup”,eventUp);<br /> canvas.addEventListener(“mousemove”,eventMove);<br /> //移动端<br /> canvas.addEventListener(“touchstart”,eventDown);<br /> canvas.addEventListener(“touchend”,eventUp);<br /> canvas.addEventListener(“touchmove”,eventMove);</p> <p> })<br /> </script><br /> </body><br /> </html> 前端开发javascript|前端开发者 https://www.rokub.com » 本文来自:前端开发者 » 《前端开发javascript原生编写刮刮乐》 » 本文链接地址:https://www.rokub.com/2774.html » 您也可以订阅本站:https://www.rokub.com
评论前必须登录!
注册