<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="screen-orientation" content="portrait">
<script src="js/jquery-1.7.2.min.js"></script>
<title>JS刮刮乐</title>
<style>
.box {
position: relative;
width: 200px;
height: 200px;
background:url("img/gao1.jpg") no-repeat;
background-size: 100% 100%;
text-align: center;
line-height: 200px;
}
#myCanvas{
position: absolute;
left:0;
top:0;
}
</style>
</head> <body>
<div id="box" class="box"> <canvas id="myCanvas" width="200" height="200"></canvas>
</div>
<input type="submit" value="再来一次" onclick="location.reload()"/>
<script type="text/javascript">
var arr = ["img/aa.png","img/bb.png","img/cc.png","img/dd.png"];
window.onload = function(){
console.log((Math.random()*3).toFixed(0)+"+"+arr[(Math.random()*3).toFixed(0)]);
var myCanvas = document.getElementById("myCanvas");
var can = myCanvas.getContext("2d");
var X = myCanvas.width;
var Y = myCanvas.height;
var oImg = new Image();
oImg.src = "img/gao4.jpeg";
var device = /android|iphone|ipad|ipod|webos|iemobile|opear mini|linux/i.test(navigator.userAgent.toLowerCase());
oImg.onload = function(){
can.beginPath();
can.drawImage(oImg,0,0,X,Y);
can.closePath();
} var tochstrat = device?"touchstart":"mousedown";
var tochmove = device?"touchmove":"mousemove";
var tochend = device?"touchend":"mouseup"; function draw(event){
var x = device?event.touches[0].clientX:event.clientX;
var y = device?event.touches[0].clientY:event.clientY;
console.log("X:"+x+"Y:"+y);
can.beginPath();
//
can.globalCompositeOperation = "destination-out";
can.arc(x,y,20,0,Math.PI*2,false);
can.fill();
can.closePath();
}
myCanvas.addEventListener(tochstrat,function(){
myCanvas.addEventListener(tochmove,draw,false);
},false);
myCanvas.addEventListener(tochend,function(){
myCanvas.addEventListener(tochmove,draw,false);
},false);
$("#box").css("background-image","url("+arr[(Math.random()*3).toFixed(0)]+")");
}
</script>
</body>
</html>
使用HTML5 globalCompositeOperation = "destination-out"; 方法实现的刮刮乐效果