HTML5使用Canvas完成刮刮乐效果

= =初来乍到，不知道该怎么下手写博文，写得不好，大家见谅哈。

咳咳，下面开始正文。

既然是使用Canvas来完成刮刮乐的效果，那么我们先来创建一个Canvas标签，并给它赋予一个边框，以便于我们查看画布位置及大小。

<canvas id="myCanvas" style="border: 1px solid #000000;" ></canvas>

创建完画布便签后就可以开始写js

首先，先获取到画布的id及其属性

var c = document.getElementById("myCanvas");
var context = c.getContext("2d");

然后声明一个图片变量

var img = new Image();
//img.src = "images/img0.jpg";  //完整图片地址

下面是一段控制刮刮乐中奖的概率代码

var str = "images/img";  //图片地址前缀
var nums = "0000000000112233445566778";  //控制图片出现的概率，此处 图片0出现的概率为2/5，图片1出现的概率为1/25，以此类推，可根据自己的需求修改出现概率及图片
var num = nums.charAt(parseInt(Math.random()*25)); //随机数生成出现的图片数字
var jpg = ".jpg"; //图片地址的后缀
c.style.backgroundImage = 'url("'+str+num+jpg+'")'; //设置画布背景为随机生成的图片地址

根据背景图片大小

c.style.width = "320px";
c.style.height = "160px";

接着绘制一个灰色矩形，遮住背景，如图所示

context.fillStyle = "#ccc";
context.globalCompositeOperation = "destination-over"; //与destination-out实现擦除效果
context.beginPath();
context.fillRect(0,0,320,160);
context.closePath();

最后控制鼠标移动时在画布内产生圆形，实现擦除灰色矩形，显现背景图，如图所示

c.onmousemove = function(e)
{
//获取鼠标位置
var x = e.pageX - c.offsetLeft;
var y = e.pageY - c.offsetTop;

context.globalCompositeOperation = "destination-out";
context.beginPath();
context.arc(x,y,10,0,2*Math.PI,true);
context.fill();
context.closePath();
}

至此，已经可以实现刮刮乐效果了<(￣︶￣)>