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