你玩过刮刮卡么?一不小心可以中奖的那种。今天我给大家分享一个基于HTML5技术实现的刮刮卡效果,在PC上只需按住鼠标,在手机上你只需按住指头,轻轻刮去图层就可以模拟真实的刮奖效果。
我们利用HTML5的画布Canvas,结合其提供的API,在Canvas元素上绘制一个灰色蒙层,然后通过检测用户鼠标移到和手势来绘制一个透明的图形,这样就能看到Canvas背景下的`真实图片,就达到刮刮卡效果。
HTML
我们只需要在页面中加入canvas标签元素,其他的就看javascript的了。注意canvas元素是HTML5才有的元素,运行在支持HTML5的现代浏览器上。
代码如下:
<canvas></canvas>
Javascript
首先,我们要禁用页面的鼠标选中拖动的事件,就是不运行执行选中操作。
代码如下:
var bodyStyle = e;
serSelect = 'none';
itUserSelect = 'none';
接着我们定义图片类,获取canvas元素,并设置背景和位置属性。我们在本例中用到两张随机照片,每次刷新随机一张图片作为背景。
代码如下:
var img = new Image();
var canvas = ySelector('canvas');
groundColor='transparent';
tion = 'absolute';
var imgs = ['p_0.jpg','p_1.jpg'];
var num = r(om()*2);
= imgs[num];
然后进入主体,当检测到图片加载完的时候,首先定义一些属性和函数,函数layer()用来绘制一个灰色的正方形,eventDown()定义了按下事件eventUp()定义了松开事件,eventMove()定义了移动事件,其中当按下时,获取坐标位移,并通过arc(x, y, 10, 0, * 2)来绘制小圆点。
代码如下:
ventListener('load', function(e) {
var ctx;
var w = h,
h = ht;
var offsetX = etLeft,
offsetY = etTop;
var mousedown = false;
function layer(ctx) {
Style = 'gray';
Rect(0, 0, w, h);
}
function eventDown(e){
entDefault();
mousedown=true;
}
function eventUp(e){
entDefault();
mousedown=false;
}
function eventMove(e){
entDefault();
if(mousedown) {
if(gedTouches){
e=gedTouches[th-1];
}
var x = (ntX + llLeft || X) - offsetX || 0,
y = (ntY + llTop || Y) - offsetY || 0;
with(ctx) {
beginPath()
arc(x, y, 10, 0, * 2);//绘制圆点
fill();
}
}
}
//...
});