-
下载下载演示源代码
你玩过刮刮卡一个无心的人，可以获奖。我要共享一张基于HTML5技术的卡片来达到划痕的效果，你今天在PC上只需要按手机上的鼠标，你只需要按住手指，轻轻地刮掉层就能模拟真正的奖品刮效果。
我们使用HTML5画布画布，结合所提供的API，在画布元素中绘制一个灰色遮罩层，然后通过鼠标检测用户和手势绘制透明图形，从而可以看到画布真实图片的背景，达到刮刮卡效果。
HTML
我们只需要在页面中添加画布标记元素，然后其他人会查看Javaｓｃｒｉｐｔ，注意画布元素是HTML5的一部分，它在支持HTML5的现代浏览器上运行。
Javaｓｃｒｉｐｔ
首先，我们要禁用页面上选择的鼠标的拖动事件，或者不执行选定操作的执行。
VaR型号= document.body.style；
bodystyle.mozuserselect =不关；
bodystyle.webkituserselect =不关；
然后定义图片类，获取画布元素，并设置背景和位置属性。在这种情况下，我们使用两张随机照片刷新一次随机图片作为背景。
VaR img =新的图像（）；
VaR的画布document.queryselector（'canvas）；
画布背景颜色= 'transparent。风格；
canvas.style.position =绝对的；
VaR IMGS = { 'p_0 .webp，'p_1 .webp}；
VaR Num = math.floor（Math.random）*（2）；
img.src = IMGS {数量}；
然后进入人体，当检测到的图像被加载，首先一些属性和函数的定义，函数（层）是用来绘制一个灰色的正方形，eventdown（eventup）定义了新闻事件（）定义了释放事件，eventmove（）定义了移动事件，按下它时，得到的位移坐标。通过电弧（X，Y，10, 0，math.pi×2）画点。
Img.addEventListener（负荷功能（e）{
VaR CTX；
无功W = img.width，
H = img.height；
无功offsetx = canvas.offsetleft，
offsety = canvas.offsettop；
Var MouseDown =假；
功能层（CTX）{
ctx.fillstyle = 'gray；
ctx.fillrect（0, 0，W，H）；
}
功能eventdown（e）{
E.preventDefault（）；
mousedown =真；
}
功能eventup（e）{
E.preventDefault（）；
mousedown = false；
}
功能eventmove（e）{
E.preventDefault（）；
如果（mousedown）{
如果（e.changedtouches）{
E = e.changedtouches { e.changedtouches length-1 }；
}
var = X（e.clientx + document.body.scrollleft e.pagex offsetx | | | |）- 0，
Y =（e.clienty + document.body.scrolltop e.pagey offsety | | | |）- 0；
用（CTX）{
BeginPath（）
弧（x，Y，10, 0，math.pi×2）； / /画点
填充（）；
}
}
}
…
}）；
最后，通过画布调用上述函数，绘制图形，并收听触摸和鼠标事件，调用相应的函数，请参见代码：
Img.addEventListener（负荷功能（e）{
上/中/…代码
画布宽度= W；
画布高度= h；
帆布风格。背景= 'url（+ IMG SRC +'。）；
CTX = canvas.getcontext（二维的）；
CTX fillStyle = 'transparent；
ctx.fillrect（0, 0，w，h）； / /画一个矩形
层（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）；
以上只是仅供参考，我们可以结合实际情况，结合后台数据库和程序，完成一个真正的划痕。