canvas设计刮刮卡

先随机生成一个奖项，然后通过 globalCompositeOperation 和之前学到的涂鸦知识，让显示重叠的透明处理。最后在刮到一定面积的的时候再自动把剩下的残渣自动清除。

主要代码

ctx.globalCompositeOperation = 'destination-out'
// 显示老的图层中没重叠的,其他透明，在整张画布上原先有一张图片，涂鸦之后涂鸦层和图片层重合的透明处理，就形成了刮刮卡的效果。

源代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>抽奖模拟器</title><meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<canvas id="demo" width="350px" height="590px">您的浏览器不支持canvas，请升级您的浏览器
</canvas>
<div class="result"><p class="content"></p>
</div>
<div class="retry">再试亿次</div></body>
<script>/*** 刮刮卡2** */window.onload = () => {// 统计抽奖的次数let sum = 0// 随机产生一个奖项，模拟抽卡function doRandom() {let num = Math.random() * 100let res = ['特等奖', '一等奖', '二等奖', '三等奖', '没有奖']if (num >= 0 && num <= 2.5) {  // 这里模拟概率cont[0].innerHTML = res[0]} else if (num > 2.5 && num <= 7.5) {cont[0].innerHTML = res[1]} else if (num > 7.5 && num <= 15) {cont[0].innerHTML = res[2]} else if (num > 15 && num <= 45) {cont[0].innerHTML = res[3]} else if (num > 45 && num <= 100) {cont[0].innerHTML = res[4]}sum++}let canvas = document.getElementById('demo')let ctx = canvas.getContext('2d')let img = new Image()// 先让画布被这个背景图填满img.src = './imgs/surprise.png' // 图片自己选，也可以使用fill()方法产生一个纯色的背景let status = falsectx.globalAlpha = 1 // 画布图像的透明度let orilet timing = 0let aimg.onload = () => {ctx.drawImage(img, 0, 0, img.width, img.height)ori = canvas.toDataURL()/* -----------手机端-------- */canvas.addEventListener('touchstart', (e) => {console.log('ok');ctx.beginPath()e = e || window.event// 获取某一个触点let touchC = e.changedTouches[0]let x = touchC.clientX - canvas.offsetLeftlet y = touchC.clientY - canvas.offsetTop + document.documentElement.scrollTopctx.lineWidth = 20ctx.lineJoin = 'round'ctx.lineCap = 'round'ctx.globalCompositeOperation = 'destination-out' // 全部代码中最核心的一步ctx.moveTo(x, y)// 即使你点了一下，也会出现画出一个点ctx.lineTo(x + 0.5, y + 0.5)ctx.stroke()})// 正式绘制document.addEventListener('touchmove', (e) => {e = e || window.event// 重新获取某一个触点let touchC = e.changedTouches[0]let x = touchC.clientX - canvas.offsetLeftlet y = touchC.clientY - canvas.offsetTop + document.documentElement.scrollTop// 绘制一个起点，即使你没有滑动，就只是点了一下，也会在原地产生一个圆形的痕迹ctx.lineWidth = 20ctx.lineJoin = 'round'ctx.lineCap = 'round'ctx.lineTo(x, y)ctx.stroke()})document.addEventListener('touchend', (e) => {let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)// 已经被涂抹的像素点let flag = 0let allPx = canvas.width * canvas.height // 全部的像素点for (let i = 0; i < allPx; i++) {//被涂抹掉的像素点是上图层(绘制的涂鸦)与下图层(原先设定好的背景图片)的重叠部分，由于                   //我们设定的重叠处理为destination-out，会把重叠部分透明化，即该像素点的grba中的a值为0if (imageData.data[4 * i + 3] === 0) {flag++}}// 统计完被涂鸦的面积，开始计算是不是超过整个图形面积的0.4倍，如果超过，直接隐藏画布，显示            //藏在canvas后面的HTML内容，即抽奖结果if (flag > allPx * 2 / 5) {canvas.style.transition = '0.5s'canvas.style.opacity = '0'}})/* -----------手机端-------- */// 电脑端，电脑的光标不同于手机的触屏，光标一直都在，所以要使用status来检测鼠标是否在画布内按              //下并且在画布内拖拽。但是里面的方法是完全一样的。canvas.onmousedown = (e) => {ctx.beginPath()e = e || window.eventlet x = e.clientX - canvas.offsetLeftlet y = e.clientY - canvas.offsetTop + document.documentElement.scrollTopctx.lineWidth = 20ctx.lineJoin = 'round'ctx.lineCap = 'round'ctx.globalCompositeOperation = 'destination-out'ctx.moveTo(x, y)ctx.lineTo(x + 0.5, y + 0.5)ctx.stroke()document.onmousemove = (e) => {e = e || window.eventlet x = e.clientX - canvas.offsetLeftlet y = e.clientY - canvas.offsetTop + document.documentElement.scrollTopctx.lineWidth = 20ctx.lineJoin = 'round'ctx.lineCap = 'round'ctx.lineTo(x, y)ctx.stroke()}document.onmouseup = () => {document.onmousemove = nulllet imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)let flag = 0let allPx = canvas.width * canvas.heightfor (let i = 0; i < allPx; i++) {if (imageData.data[4 * i + 3] === 0) {flag++}}if (flag > allPx * 2 / 5) {canvas.style.transition = '0.5s'canvas.style.opacity = '0'}}}}// 抽奖环节、let cont = document.getElementsByClassName('content')doRandom() // 获取随机奖项，并渲染至页面上// 再抽一次奖let retry = document.getElementsByClassName('retry')retry[0].onclick = () => {let img2 = new Image()img2.src = './imgs/surprise.png'ctx.globalCompositeOperation = 'source-over'ctx.clearRect(0, 0, canvas.width, canvas.height)canvas.style.transition = '0s'canvas.style.opacity = '1'img2.onload = () => {ctx.drawImage(img2, 0, 0)doRandom()}}}
</script>
<style>* {margin: 0;padding: 0;}body {background-color: #eee;text-align: center;transition: 0.5s;/*cursor: url(./imgs/hidden-box2.cur), default;*/}#demo {display: inline-block;z-index: -1;position: absolute;left: 0;top: 180px;right: 0;bottom: 0;margin: auto;/*background-color: white;*/border-radius: 15px;transition: 0.2s;}.result {display: inline-block;position: absolute;z-index: -2;width: 350px;height: 590px;left: 0;top: 180px;right: 0;bottom: 0;margin: auto;}.result .content {line-height: 160px;width: 100px;font-size: 80px;margin: 50px auto;user-select: none;}.retry {margin: 750px auto;width: 90px;border-radius: 8px;font-size: 15px;color: white;padding: 8px 19px;background-color: rgb(49, 148, 248);user-select: none;cursor: pointer;}
</style>
</html>

PS：我这里设计的检测刮掉的面积是在鼠标（手指）松开的时候检测，所以会失去一点用户体验，所以可以把检测的方法放到 onmousemove 或 touchmove中实现实时检测（虽然会消耗一点内存就是了，看大家的需求了）

展示效果

canvas设计抽奖刮刮卡(非酋慎点) - Kaiqisan相关推荐

Python关于抽奖的思考——不当非酋
Python关于抽奖的思考--不当非酋目录 Python关于抽奖的思考--不当非酋一.文章主题二.抽奖设计思路第一步:需求第二步:建立奖品列表第三步:概率实现第一种:通过区间实现第二种 ...
用Canvas实现刮刮卡功能的研究与实践
前几天,单位老刘让我研究一下网上最近很流行的"刮刮卡"是怎么实现的,我第一时间就想起了我媳妇曾经跟我说过的:"在HTML5中Canvas的绘图能力很强大" ...
H5 canvas制作刮刮卡效果并计算清理结果
简要步骤如下 1.绘制底图载体任意DOM CANVAS 图片皆可 2.canvas绘制交互区域纯色或图片皆可 3.设定混合模式 "destination-out" 关键 4.根 ...
刮刮乐html5效果擦除,利用HTML5的画布Canvas实现刮刮卡效果
先给大家展示效果: 你玩过刮刮卡么?一不小心可以中奖的那种.今天我给大家分享一个基于HTML5技术实现的刮刮卡效果,在PC上只需按住鼠标,在手机上你只需按住指头,轻轻刮去图层就可以模拟真实的刮奖效果. ...
php中奖概率算法，可用于刮刮卡，大转盘等抽奖算法
php中奖概率算法,可用于刮刮卡,大转盘等抽奖算法.用法很简单,代码里有详细注释说明,一看就懂 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...
php中奖概率算法，刮刮卡/大转盘抽奖算法
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 php中奖概率算法,可用于刮刮卡,大转盘等抽奖算法前言一.概率算法二.奖项数组三.引用输出总结前言以下是我整理的在项目中 ...
paip 刮刮卡砸金蛋抽奖概率算法跟核心流程
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! paip ...
canvas绘制刮刮卡，超过一定面积显示全图
说明:栗子转自简书,在他的基础上添加了重置和超过一定面积显示全图,仅做学习使用.(推荐7.2的代码) 1.前端时间做的一个项目需要支持多终端,网页版需要使用html5中canvas画布对象对一组数据进 ...
用canvas实现刮刮卡特效
canvas(画布)应用十分广泛,不仅可用来画图,配合ECharts做表格,还能做游戏．不过这次分享一下用canvas实现刮刮卡特效的一个应用．如果还不是很了解canvas基本知识,可以读一下我的相 ...
canvas刮刮卡游戏开发
canvas刮刮卡游戏开发先看效果: 一.基础知识-画布元素的使用 1 绘制线条思路在页面中添加画布元素获取画布元素的上下文环境对象使用上下文环境对象绘制图形,保存在内存中绘制一个线条 / ...

canvas设计抽奖刮刮卡(非酋慎点) - Kaiqisan

canvas设计刮刮卡

主要代码

源代码

展示效果

canvas设计抽奖刮刮卡(非酋慎点) - Kaiqisan相关推荐

最新文章

热门文章