公司国庆搞了个集卡、抽奖小活动。抽奖需要刮刮卡的效果,感觉 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
- RGB色值:
- 线性渐变
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-*
系列动作主体是原内容。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)
微信公众号:前端linong
总结
- 这个可以考虑不兼容canvas的情况,单击时直接将上面的层透明掉。
mousemove
要注意节流- 使用透明图片自定义笔触还是蛮有意思的。
- 好了,今天就到这里吧。