HTML5 canvas标识完成刮刮卡实际效果

日期:2021-01-20 类型:科技新闻 

关键词:制作小程序,小程序商城,扫码点餐小程序,微信小程序开店的步骤,牛刀小程序

你玩过刮刮卡么?1一不小心能够中奖的那种。今日我给大伙儿共享1个根据HTML5技术性完成的刮刮卡实际效果,在PC上只需按住电脑鼠标,在手机上上你只需按住指头,轻轻地刮去涂层便可以仿真模拟真正的刮奖实际效果。

源代码免费下载:点一下免费下载

大家运用HTML5的画布Canvas,融合其出示的API,在Canvas元素上绘图1个灰色蒙层,随后根据检验客户电脑鼠标移到和手式来绘图1个全透明的图型,这样就可以看到Canvas情况下的真正照片,就做到刮刮卡实际效果。

HTML

大家只必须在网页页面中添加canvas标识元素,别的的就看javascript的了。留意canvas元素是HTML5才有的元素,运作在适用HTML5的当代访问器上。

拷贝编码
编码以下:

<canvas></canvas>


Javascript

最先,大家要禁用网页页面的电脑鼠标选定拖拽的恶性事件,便是不运作实行选定实际操作。

拷贝编码
编码以下:

var bodyStyle = document.body.style;
bodyStyle.mozUserSelect = 'none';
bodyStyle.webkitUserSelect = 'none';

接着大家界定照片类,获得canvas元素,并设定情况和部位特性。大家在本例选用到两张任意相片,每次更新任意1张照片做为情况。

拷贝编码
编码以下:

var img = new Image();
var canvas = document.querySelector('canvas');
canvas.style.backgroundColor='transparent';
canvas.style.position = 'absolute';
var imgs = ['p_0.jpg','p_1.jpg'];
var num = Math.floor(Math.random()*2);
img.src = imgs[num];

随后进到行为主体,当检验到照片载入完的情况下,最先界定1些特性和涵数,涵数layer()用来绘图1个灰色的正方形,eventDown()界定了按下恶性事件eventUp()界定了松开恶性事件,eventMove()界定了挪动恶性事件,在其中当按下时,获得座标位移,并根据arc(x, y, 10, 0, Math.PI * 2)来绘图小圆点。

拷贝编码
编码以下:

img.addEventListener('load', function(e) {
var ctx;
var w = img.width,
h = img.height;
var offsetX = canvas.offsetLeft,
offsetY = canvas.offsetTop;
var mousedown = false;

function layer(ctx) {
ctx.fillStyle = 'gray';
ctx.fillRect(0, 0, w, h);
}

function eventDown(e){
e.preventDefault();
mousedown=true;
}

function eventUp(e){
e.preventDefault();
mousedown=false;
}

function eventMove(e){
e.preventDefault();
if(mousedown) {
if(e.changedTouches){
e=e.changedTouches[e.changedTouches.length⑴];
}
var x = (e.clientX + document.body.scrollLeft || e.pageX) - offsetX || 0,
y = (e.clientY + document.body.scrollTop || e.pageY) - offsetY || 0;
with(ctx) {
beginPath()
arc(x, y, 10, 0, Math.PI * 2);//绘图圆点
fill();
}
}
}

//...
});

最终,根据canvas启用以上涵数,绘图图型,而且侦听触控及电脑鼠标恶性事件,启用相应的涵数,请看编码:

拷贝编码
编码以下:

img.addEventListener('load', function(e) {
//..接上段编码
canvas.width=w;
canvas.height=h;
canvas.style.backgroundImage='url('+img.src+')';
ctx=canvas.getContext('2d');
ctx.fillStyle='transparent';
ctx.fillRect(0, 0, w, h);//绘图矩形框
layer(ctx);

ctx.globalCompositeOperation = 'destination-out';

canvas.addEventListener('touchstart', eventDown);
canvas.addEventListener('touchend', eventUp);
canvas.addEventListener('touchmove', eventMove);
canvas.addEventListener('mousedown', eventDown);
canvas.addEventListener('mouseup', eventUp);
canvas.addEventListener('mousemove', eventMove);

你能够免费下载DEMO中的详细的编码,你能够依据具体要求,融合后台管理程序流程与数据信息库,进行1个真实的刮刮卡程序流程。

上一篇:手机微信抽奖手机游戏的几种方法 返回下一篇:没有了