前端开发javascript原生编写刮刮乐

by 前端开发者 · Published 2018年5月14日20:20:48 · Updated 2018年5月14日19:45:36

摘要：前端开发javascript|前端开发者 html 代码 <!DOCTYPE html> <html> <head> <meta charset=”utf-8″/> <title>……

前端开发javascript|前端开发者

html 代码

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

前端开发javascript|前端开发者

https://www.rokub.com

前端开发javascript原生编写刮刮乐

You may also like...

发表评论取消回复

近期文章

近期评论

分类目录

精选

联系方式

前端开发javascript原生编写刮刮乐

You may also like...

怎么学习前端开发

web前端开发 html css 实战：白天黑夜开关

前端开发视频教学百度网盘

发表评论 取消回复

近期文章

近期评论

分类目录

精选

联系方式

发表评论取消回复