html刮刮卡效果实现

时间: 2019-10-03阅读: 763标签: 效果

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


实现方案都有什么

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

我们期望有什么功能

  1. 底部内容自定义(我们将 canvas 浮在内容上即可)
  2. 自定义蒙版颜色(canvas 绘制画布设置一下颜色即可 context.fillStyle = color;)
  3. 自定义蒙版图片(使用drawImage来绘制画布)
  4. 自定义笔触

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


底部内容自定义

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

  1. 方案一 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>
  2. 方案二 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. 色值填充

    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
  2. 线性渐变 createLinearGradient()
  3. 径向渐变 createRadialGradient()
  4. 图案 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)
}


刮奖笔触自定义(重要)

  1. clearRect 方案 效果传送门
    context.clearRect(x, y, width, height); 将画布某一块矩形区域内容清除
    使用起来还是蛮简单的,纠正一下中心点即可。但是只能是矩形,看上去锯齿也很严重
  2. 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);
})


刮开开面积占比

  1. getImageData 返回一个ImageData对象,其中包含Canvas画布部分或完整的像素点信息。
    四个值标识一个像素点信息分别为 (r,g,b,a)。这里我们只判断透明通道即可
  2. 之后我们统计 通道透明数/总循环数 就是刮开面积占比
        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)


总结

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


站长推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

3.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/5788

让网页变灰的实现_网站蒙灰CSS样式总汇

每次全国哀悼日,各大网站首页都变成了灰色,添加以下全局CSS样式,可以实现此效果:使用方法:这段代码可以变网页为黑白,将代码加到CSS最顶端就可以实现素装。

Css3实现背景毛玻璃效果

ios里毛玻璃效果的使用非常多,本文介绍一个实现div毛玻璃背景的方法;CSS3的Filter主要用在图像的特效处理上,默认值为none,还有以下备选项:

遮罩层镂空效果的多种实现方法

原理:先截一张相同位置的图片,创建一个遮罩层,然后把图片定位在相应的位置上。优点:原理简单;兼容性好,可以兼容到IE6、IE7;可以同时实现镂空多个。

炫酷的播放粒子效果,你也可以学会!使用Web动画API制作

当谈到运动和动画时,可能没有什么比粒子更让我喜欢了,这就是为什么每次我探索新技术时,我总是以尽可能多的创建粒子来演示。在本文中,单击按钮时,我们将使用Web Animations API创建烟花效果

canvas实现刮刮卡效果

最近手机应用和网页都有很多类似刮刮卡抽奖效果,所以我花了点时间来写这个特效,单页面实现刮刮卡效果

JavaScript实现许愿墙效果

初始化自动生成两个愿望签;输入框失去焦点或者按回车键,会生成愿望签;点击关闭会删除愿望签;可以拖动愿望签,并且不能拖出可视窗口

利用CSS变量实现炫酷的悬浮效果

最近,我从 Grover网站 上发现以一个好玩儿的悬停动画,这个动画是将鼠标移动到订阅按钮上移动光标,会跟随光标实现相应的彩色渐变。这个想法很简单,但是它能使这个按钮脱颖而出,人们一下子就注意到它了,增加了点击的概率。

ES6前后实现排它的两种写法

排它思想:清除其它所有的没有选中元素的样式, 只设置当前选中元素的样式

background 实现四角选中框效果

background 上绑定的多项背景图实际为background-image 和 background-position;也就是图片和位置;linear-gradient 是一种特殊的image类型,之后禁止重复和background-size是设置每个点的宽高

CSS如何在页面加载时创建淡入效果?

想要使用CSS在页面加载上创建淡入效果,可以使用css的animation属性或transition属性在页面加载时创建淡入效果。下面就来通过示例来介绍一下。通过2个关键帧来定义CSS动画:一个不透明度设置为0,另一个不透明度设置为1。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广