刮刮卡效果实现

jiezi

5 年前

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

clearRect 这是我第一个找到的 API，作用是 清除一个矩形区域内的内容 。缺点是矩形
globalCompositeOperation 基于上面的缺点，我发现了他 destination-out 是我需要的，作用是改变canvas 图形的混合模式

底部内容自定义（我们将 canvas 浮在内容上即可）
自定义蒙版颜色（canvas 绘制画布设置一下颜色即可 context.fillStyle = color;）
自定义蒙版图片（使用 drawImage 来绘制画布）
自定义笔触
1. clearRect为矩形
2. arc配合 globalCompositeOperation 来实现圆形
3. 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 中文网

色值填充
1. RGB 色值：RGB(255, 0, 0)
2. HSL 色值：HSL(360, 100%, 50%)
3. RGBA 色值：RGBA(255, 0, 0, .5)
4. HSLA 色值：HSLA(360, 100%, 50%, .5)
5. HEX 色值：#FF0000
线性渐变 createLinearGradient()
径向渐变 createRadialGradient()
图案 createPattern

ctx = 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-* 系列动作主体是原内容。
1. source-over 默认值，表现为覆盖。纯视觉覆盖。
2. source-in 表现为在原内容上绘制，显示重叠部分，透明度叠加。
3. source-out 与 source-in 对应，表现为减去原内容。
4. source-atop 表现为在原内容上绘制，使用原内容透明度。
5. destination-over 表现为原内容在上方，新内容在下方绘制。
6. destination-in 同理，表现为透明度叠加，显示重叠部分。
7. destination-out 同理，隐藏原内容和新内容重叠的部分。
8. destination-atop 原内容只显示和新内容重叠的部分，同时新内容在下方显示
9. lighter 自然光混合效果
10. copy 只显示新内容
11. xor 重叠区域为透明
12. multiply 正片叠底。顶层的像素与底层的对应像素相乘。结果是一幅更黑暗的图画
13. screen 滤色。像素反转，相乘，然后再反转。最终得到更淡的图形（和 multiply 相反）
14. overlay 叠加。multiply 和 screen 组合效果。基础图层上暗的部分更暗，亮的部分更亮
15. darken 变暗。保留原内容和新内容中最暗的像素
16. lighten 变亮。保留原内容和新内容中最亮的像素
17. color-dodge 颜色减淡。底部图层色值除以顶部图层的反相色值
18. color-burn 颜色加深。底部图层的色值除以顶部图层色值，得到的结果再反相
19. hard-light 强光。类似 overlay，是 multiply 和 screen 组合效果。只不过底层和顶层位置交换下
20. soft-light 柔光。hard-light 的柔和版本。纯黑色或白色不会生成为纯黑色或白色。
21. difference 差异。顶层色值减去底层色值的绝对值。如果都是白色，则最后是黑色，因为值为 0；什么时候是白色呢，例如 RGB(255,0,0)和 RGB(0,255,255)，色值相减后绝对值是 RGB(255,255,255)。
22. exclusion 排除。类似 difference，不过对比度较低。
23. hue 色调。最终的颜色保留底层的亮度和色度，同时采用顶层的色调。
24. saturation 饱和度。最终的颜色保留底层的亮度和色调，同时采用顶层的色度。
25. color 色值。最终的颜色保留底层的亮度，同时采用顶层的色调和色度。
26. 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 要注意节流
使用透明图片自定义笔触还是蛮有意思的。
好了，今天就到这里吧。

刮刮卡效果实现

实现方案都有什么

我们期望有什么功能

底部内容自定义

蒙版颜色

蒙版图片

刮奖笔触自定义（重要）

轨道生成器

刮开开面积占比

微信公众号：前端 linong

总结