苏州正洋化工科技有限公司

今天小编跟大家讲解下有关html刮刮卡效果实现 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关html刮刮卡效果实现 的相关资料，希望小伙伴们看了有所帮助。

公司国庆搞了个集卡、抽奖小活动。抽奖需要刮刮卡的效果，感觉 css 是实现不了。看我使用 canvas 如何实现刮刮卡效果。废话不多说，线上效果jsrun-测试地址、lilnong.top-测试地址

实现方案都有什么clearRect这是我第一个找到的 API，作用是清除一个矩形区域内的内容。缺点是矩形globalCompositeOperation基于上面的缺点，我发现了他destination-out是我需要的，作用是改变canvas图形的混合模式我们期望有什么功能底部内容自定义（我们将 canvas 浮在内容上即可）自定义蒙版颜色（canvas 绘制画布设置一下颜色即可context.fillStyle = color;）自定义蒙版图片（使用drawImage来绘制画布）

自定义笔触

clearRect为矩形arc配合globalCompositeOperation来实现圆形drawImage配合globalCompositeOperation来自定义笔触自动刮开&自动刮开轨道生成器刮开面积占比

底部内容自定义

两个方案的差距不大，根据个人喜好选择即可。

方案一 DOM 层级（拥有更多的能力）效果查看-传送门

<style type="text/css"> #app1{width:300px;height:100px;position: relative;border: 1px solid #f00;} #app1Content{width:300px;height:100px;position: absolute;left:0;top:0;z-index: 1} #app1Mark{width:300px;height:100px;position: absolute;left:0;top:0;z-index: 2} </style> <div id="app1"> <div id="app1Content"style="background:url(https://www.lilnong.top/static/img/ml-btn6.png) left center no-repeat">我是自定义内容</div> <canvas id="app1Mark"></canvas> </div>

方案二 canvas 背景图（使用简单）效果查看-传送门

<style type="text/css"> #app2{width:300px;height:100px;position: relative;border: 1px solid #f00;} #app2Mark{width:300px;height:100px;position: absolute;left:0;top:0;z-index: 2}</style><div id="app2"> <canvas id="app2Mark"style="background:url(https://www.lilnong.top/static/img/ml-btn6.png) left center no-repeat"></canvas></div>蒙版颜色

ctx.fillStyle = '#0cc';主要通过这个来设置填充样式。效果查看-传送门感兴趣可以去看看，我这里没用到就不细说了。传送门 - Canvas API中文网

色值填充

RGB色值：RGB(255, 0, 0)HSL色值：HSL(360, 100%, 50%)RGBA色值：RGBA(255, 0, 0, .5)HSLA色值：HSLA(360, 100%, 50%, .5)HEX色值：#FF0000线性渐变createLinearGradient()径向渐变createRadialGradient()图案createPatternctx = app3Mark.getContext('2d');app3Mark.width = 300;app3Mark.height = 100;ctx.moveTo(0, 0);ctx.lineTo(app3Mark.width, 0);ctx.lineTo(app3Mark.width, app3Mark.height);ctx.lineTo(0, app3Mark.height);ctx.fillStyle = '#0cc';ctx.fill();

蒙版图片

drawImage()使用这个方法来绘制一个图片，需要等图片onload之后再使用,效果查看-传送门

ctx = app4Mark.getContext('2d');app4Mark.width = 300;app4Mark.height = 100;var imageFill = new Image();imageFill.src = 'https://www.lilnong.top/static/img/defaultmatch.png'app4MarkCtx = ctx;imageFill.onload = function(){ app4MarkCtx.drawImage(this,0,0,300,100)}

刮奖笔触自定义（重要）clearRect方案效果传送门context.clearRect(x, y, width, height);将画布某一块矩形区域内容清除。使用起来还是蛮简单的，纠正一下中心点即可。但是只能是矩形，看上去锯齿也很严重。

globalCompositeOperation方案效果传送门设置绘制时，图形的混合模式。传送门-canvas api，其实好多我都没用过，太难了，PS中的我不怎么会用。destination-*区别是动作的主体是新内容还是原内容。source-*系列是新内容，而destination-*系列动作主体是原内容。

source-over默认值，表现为覆盖。纯视觉覆盖。source-in表现为在原内容上绘制，显示重叠部分，透明度叠加。source-out与source-in对应，表现为减去原内容。source-atop表现为在原内容上绘制，使用原内容透明度。destination-over表现为原内容在上方，新内容在下方绘制。destination-in同理，表现为透明度叠加，显示重叠部分。destination-out同理，隐藏原内容和新内容重叠的部分。destination-atop原内容只显示和新内容重叠的部分，同时新内容在下方显示lighter自然光混合效果copy只显示新内容xor重叠区域为透明multiply正片叠底。顶层的像素与底层的对应像素相乘。结果是一幅更黑暗的图画screen滤色。像素反转，相乘，然后再反转。最终得到更淡的图形（和 multiply 相反）overlay叠加。 multiply 和 screen 组合效果。基础图层上暗的部分更暗，亮的部分更亮darken变暗。保留原内容和新内容中最暗的像素lighten变亮。保留原内容和新内容中最亮的像素color-dodge颜色减淡。底部图层色值除以顶部图层的反相色值color-burn颜色加深。底部图层的色值除以顶部图层色值，得到的结果再反相hard-light强光。类似 overlay，是 multiply 和 screen 组合效果。只不过底层和顶层位置交换下soft-light柔光。hard-light 的柔和版本。纯黑色或白色不会生成为纯黑色或白色。difference差异。顶层色值减去底层色值的绝对值。如果都是白色，则最后是黑色，因为值为0；什么时候是白色呢，例如RGB(255,0,0)和RGB(0,255,255)，色值相减后绝对值是RGB(255,255,255)。exclusion排除。类似difference，不过对比度较低。hue色调。最终的颜色保留底层的亮度和色度，同时采用顶层的色调。saturation饱和度。最终的颜色保留底层的亮度和色调，同时采用顶层的色度。color色值。最终的颜色保留底层的亮度，同时采用顶层的色调和色度。luminosity亮度。最终的颜色保留底层的色调和色度，同时采用顶层的亮度。轨道生成器

先来看我们删除的代码。其实依靠的就是x和y的坐标值。那么我们抽一个clear的方法，传递坐标。把每次单击的点都记录一下，然后循环把点推进去不就是自动的了吗？

app6Mark.addEventListener('mousedown', function(e){ app6MarkMouseDownTag = 1 app6MarkCtx.fillText('lilnong.top', e.offsetX - 50, e.offsetY+10);})

刮开开面积占比getImageData返回一个ImageData对象，其中包含Canvas画布部分或完整的像素点信息。四个值标识一个像素点信息分别为 （r,g,b,a）。这里我们只判断透明通道即可之后我们统计通道透明数/总循环数就是刮开面积占比 var imageData = ctx.getImageData(0, 0, 300, 200).data; var eraseTotal = 0; var step = 1 * 4;//步长精度 for (var i = 3, len = imageData.length; i < len; i += step) { if (imageData[i] === 0) { eraseTotal++; } } eraseRate.innerText = eraseTotal/(len/step)

总结这个可以考虑不兼容canvas的情况，单击时直接将上面的层透明掉。mousemove要注意节流使用透明图片自定义笔触还是蛮有意思的。好了，今天就到这里吧。

来源：爱蒂网