[HTML] 纯文本查看 复制代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <canvas id="mycanvas" style="border: 1px solid #000000"></canvas> </body> <script> var mycanvas = document.getElementById("mycanvas"); var cnt = mycanvas.getContext("2d"); var arr = ['images/1.jpg','images/2.jpg']; // 图片要当背景使用 // 生成随机下标 var index = Math.floor(Math.random()*5) if(index == 4){ mycanvas.style.background = "url("+arr[1]+")" }else{ mycanvas.style.background = "url("+arr[0]+")"; } // 加图层 cnt.fillStyle = "#ccc"; cnt.fillRect(0,0,mycanvas.width,mycanvas.height); // 刮开效果 mycanvas.onmousedown = function(){ mycanvas.onmousemove = function(e){ e = e || window.event; var mouseX = e.offsetX; var mouseY = e.offsetY; cnt.clearRect(mouseX,mouseY,5,5); } document.onmouseup = function(){ mycanvas.onmousemove = null; } } </script> </html>
相关文章
精彩导读
热门资讯
关注我们
