HTML Canvas 刮刮卡抽奖效果的实现

原生js实现，页面仅需插入以下div标签

<div id="gp-dvi-c"></div>

复制js方法到页面底部，既可实现刮刮卡效果。

此效果，可以配置奖品为文字或图片。便捷自定义修改所需效果，适配了移动端、及pc端

<!DOCTYPE html>
<html><head><meta name="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><meta charset="utf-8"><title>刮刮卡</title><style type="text/css"></style></head><body><div id="gp-dvi-c"></div></body><script type="text/javascript">gginit();function ggconfig() {jackpots = ["一等奖", "二等奖", "三等奖", "四等奖", "奖励奖"]; //文字奖品// pici = '1.jpg';//图片奖品 存在即使用图片pici = '';cw = 300; //刮刮卡宽度ch = 150; //刮刮卡高度grd = 100; //干扰点数量bcw = 16; //刮刮笔触大小}function gginit() {ggconfig();//一等奖概率2% 二等奖概率6% 三等奖概率14% 四等奖概率30% 奖励奖概率48%let jackpot = randmn(0, 49);let jkp = '';if (jackpot == 0) {jkp = jackpots[0];} else if (jackpot > 0 && jackpot < 4) {jkp = jackpots[1];} else if (jackpot > 3 && jackpot < 11) {jkp = jackpots[2];} else if (jackpot > 10 && jackpot < 26) {jkp = jackpots[3];} else {jkp = jackpots[4];}dvic = document.getElementById('gp-dvi-c');dvic.style.position = 'relative';dvic.style.margin = '100px auto';dvic.style.width = cw + 'px';dvic.style.height = ch + 'px';cvspj = document.createElement('canvas');cvspj.width = cw;cvspj.height = ch;cvspj.style.position = 'absolute';dvic.appendChild(cvspj);let ctx0 = cvspj.getContext("2d");if (pici) {let img = new Image()img.onload = function() {ctx0.drawImage(img, 0, 0, cw, ch)}img.src = pici;} else {ctx0.font = '30px Arial';ctx0.fillStyle = "rgba(255, 0, 0, 1)";let text0 = jkp;let txtw0 = ctx0.measureText(text0).width;let txth0 = ctx0.measureText('M').width;ctx0.fillText(text0, cw / 2 - txtw0 / 2, ch / 2 + txth0 / 2);ctx0.strokeStyle = 'rgba(255, 0, 0, 1)';ctx0.strokeRect(0, 0, cw, ch);}ggkcvs();}function ggkcvs() {cvsggk = document.createElement('canvas');cvsggk.width = cw;cvsggk.height = ch;cvsggk.style.cursor = 'pointer';cvsggk.style.position = 'absolute';cvsggk.style.filter = 'blur(0.7px)';dvic.appendChild(cvsggk);ctx = cvsggk.getContext("2d");ctx.fillStyle = "rgba(200, 200, 200, 1)";ctx.fillRect(0, 0, cw, ch);ctx.font = '20px Arial';ctx.fillStyle = "rgba(255, 255, 255, 1)"let text = "祝君好运";let txtw = ctx.measureText(text).width;let txth = ctx.measureText('M').width;ctx.fillText(text, cw / 2 - txtw / 2, ch / 2 + txth / 2);let fillColor = ["rgba(255, 0, 0, 0.8)","rgba(255, 255, 0, 0.8)","rgba(255, 0, 255, 0.8)","rgba(0, 255, 255, 0.8)"];for (let i = 0; i < grd; i++) {ctx.beginPath();ctx.fillStyle = fillColor[randmn(0, 3)];ctx.arc(randmn(0, cw), randmn(0, ch), 1, 0, 2 * Math.PI);ctx.closePath();ctx.fill();}cvsggk.addEventListener("mousedown", handlerDownFn);cvsggk.addEventListener("mousemove", handlerMoveFn);cvsggk.addEventListener("mouseup", handlerUpFn);cvsggk.addEventListener('touchstart', handlerDownFn);cvsggk.addEventListener('touchmove', handlerMoveFn);cvsggk.addEventListener('touchend', handlerUpFn);hasDown = false;}function randmn(n, m) {let c = m - n + 1;return Math.floor(Math.random() * c + n);}function handlerDownFn(event) {hasDown = true;// console.log(event);}function handlerMoveFn(event) {if (hasDown) {let x = 0,y = 0;if (event.offsetX && event.offsetY) {x = event.offsetX;y = event.offsetY;} else {let bcr = cvspj.getBoundingClientRect();x = event.touches[0].clientX - bcr.left;y = event.touches[0].clientY - bcr.top;}// console.log(x, y)ctx.beginPath();ctx.arc(x, y, bcw, 0, 2 * Math.PI);ctx.globalCompositeOperation = "destination-out";ctx.closePath();ctx.fill();}}function handlerUpFn(event) {let imageData = ctx.getImageData(0, 0, cw, ch),length = imageData.data.length,transparentCount = 0;for (let i = 3; i < length; i += 4) {if (imageData.data[i] == 0 || imageData.data[i] == 1) transparentCount++;}// console.log(transparentCount, length)if (transparentCount >= (length / 4 / 3)) {console.log('刮开啦');ctx.clearRect(0, 0, cw, ch);cvsggk.removeEventListener("mousedown", handlerDownFn);cvsggk.removeEventListener("mousemove", handlerMoveFn);cvsggk.removeEventListener("mouseup", handlerUpFn);cvsggk.removeEventListener('touchstart', handlerDownFn);cvsggk.removeEventListener('touchmove', handlerMoveFn);cvsggk.removeEventListener('touchend', handlerUpFn);}hasDown = false;}</script>
</html>

HTML Canvas 刮刮卡抽奖效果的实现相关推荐

android抽奖动画,Android App中实现简单的刮刮卡抽奖效果的实例详解
主要思想: 将一个view设计成多层:背景层,含中奖信息等: 遮盖层,用于刮奖,使用关联一个Bitmap的Canvas 在该Bitmap上,使用它的canvas.drawPath的api来处理手势滑 ...
React实现大转盘抽奖效果
React利用canvas实现大转盘抽奖效果,效果如下: 大转盘效果主要代码: const drawImg = (x, y, r, num, ctx, index, img) => {ctx. ...
刮刮乐html5效果擦除,利用HTML5的画布Canvas实现刮刮卡效果
先给大家展示效果: 你玩过刮刮卡么?一不小心可以中奖的那种.今天我给大家分享一个基于HTML5技术实现的刮刮卡效果,在PC上只需按住鼠标,在手机上你只需按住指头,轻轻刮去图层就可以模拟真实的刮奖效果. ...
HTML用画布实现刮刮卡,利用HTML5的画布Canvas实现刮刮卡效果_javascript技巧
先给大家展示效果: 你玩过刮刮卡么?一不小心可以中奖的那种.今天我给大家分享一个基于HTML5技术实现的刮刮卡效果,在PC上只需按住鼠标,在手机上你只需按住指头,轻轻刮去图层就可以模拟真实的刮奖效果. ...
H5 canvas制作刮刮卡效果并计算清理结果
简要步骤如下 1.绘制底图载体任意DOM CANVAS 图片皆可 2.canvas绘制交互区域纯色或图片皆可 3.设定混合模式 "destination-out" 关键 4.根 ...
用Canvas实现刮刮卡功能的研究与实践
前几天,单位老刘让我研究一下网上最近很流行的"刮刮卡"是怎么实现的,我第一时间就想起了我媳妇曾经跟我说过的:"在HTML5中Canvas的绘图能力很强大" ...
html制作花样链接卡页面_使用HTML5实现刮刮卡效果
我们利用HTML5的画布Canvas,结合其提供的API,在Canvas元素上绘制一个灰色蒙层,然后通过检测用户鼠标移到和手势来绘制一个透明的图形,这样就能看到Canvas背景下的真实图片,就达到刮刮 ...
[html] 写一个类似刮刮卡效果的交互，即鼠标划过时显示号码
[html] 写一个类似刮刮卡效果的交互,即鼠标划过时显示号码 <title>Document</title> <style> *{ margin:0; paddi ...
刮刮乐html5效果擦除,HTML5实现刮刮卡的效果
HTML5实现类似刮刮卡的功能上面是最终实现刮刮卡效果注意要点设置: 1.设置用户缩放:user-scalable=no|yes [java] view plaincopyprint? 2.禁止拖 ...
canvas绘制刮刮卡，超过一定面积显示全图
说明:栗子转自简书,在他的基础上添加了重置和超过一定面积显示全图,仅做学习使用.(推荐7.2的代码) 1.前端时间做的一个项目需要支持多终端,网页版需要使用html5中canvas画布对象对一组数据进 ...

HTML Canvas 刮刮卡抽奖效果的实现

HTML Canvas 刮刮卡抽奖效果的实现相关推荐

最新文章

热门文章