阿八博客
  • 100000+

    文章

  • 23

    评论

  • 20

    友链

  • 最近新加了很多技术文章,大家多来逛逛吧~~~~
  • 喜欢这个网站的朋友可以加一下QQ群,我们一起交流技术。

刮刮卡效果实现

欢迎来到阿八个人博客网站。本 阿八个人博客 网站提供最新的站长新闻,各种互联网资讯。 喜欢本站的朋友可以收藏本站,或者加QQ:我们大家一起来交流技术! URL链接:https://www.abboke.com/jsh/2019/1010/116603.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(201910101530/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(201910101530/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()图案 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 = '201910101530/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-outsource-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 亮度
最终的颜色保留底层的色调和色度,同时采用顶层的亮度

轨道生成器

先来看我们删除的代码
其实依靠的就是xy的坐标值
那么我们抽一个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 要注意节流使用透明图片自定义笔触还是蛮有意思的
好了,今天就到这里吧

相关文章

暂住......别动,不想说点什么吗?
  • 全部评论(0
    还没有评论,快来抢沙发吧!