百木园1.刮刮乐
案例目标：利用canvas绑定事件，模拟简单刮刮乐程序。
案例思路：在canvas画布上引入是否中奖背景图片，然后在图片上覆盖涂层，当鼠标点击
并移动时擦出路径上的涂层，显示中奖信息。
主要事件：onload，onmousedown，onmousemove，onmouseup
代码示例：
<html lang=\"en\">
<head>
<meta charset=\"UTF-8\">
<title>Canvas7刮刮乐</title>
</head>
<body>
<canvas id=\"canvas7\" width=\"520\" height=\"780\">
\"您的浏览器不支持Canvas！\"
</canvas>
<script>
var canvas=document.getElementById(\'canvas7\');
var ctx=canvas.getContext(\'2d\');
var imageArr=[\'../Images/rotation01.jpg\',\'../Images/rotation02.jpg\',\'../Images/rotation03.jpg\'];
var imgObj={};
var flag=0;
for (var i=0;i<imageArr.length;i++){
var img=new Image();
img.src=imageArr[i];
imgObj[i]=img;
img.onload=function () {
flag++ //确保待图片全部加载完成后调用“lottery()”方法。
if (flag==imageArr.length){
lottery(imgObj); //全部图片加载完成后调用函数。
}
}
}
// 单独封装随机背景和清除覆盖填充函数
function lottery(obj) {
var num=Math.ceil(Math.random()*10); //创建随机数，通过设置随机数值控制中奖概率
if (num == 1){
canvas.style.background=\'URL(\'+obj[0].src+\')\';
}else if (num ==2){
canvas.style.background=\'URL(\'+obj[1].src+\')\';
}else {
canvas.style.backgroundImage=\'URL(\'+obj[2].src+\')\';
}
ctx.fillStyle=\'lightgray\';
ctx.fillRect(0,0,canvas.width,canvas.height);
// 创建鼠标点击事件，鼠标移动清除画像填充
canvas.onmousedown=function () {
canvas.onmousemove=function (e) {
e = e||window.event;
ctx.clearRect(e.offsetX,e.offsetY,25,25); //利用offset对象定位鼠标轨迹，设定清除范围
}
}
// 创建鼠标抬起事件，停止鼠标移动事件
canvas.onmouseup=window.document.onmouseup=function () {
canvas.onmousemove=null;
}
}
</script>
</body>
</html>
来源：https://www.cnblogs.com/husa/p/14596987.html
图文来源于网络，如有侵权请联系删除。