PC端使用Canvas实现刮刮卡效果

最新推荐文章于 2021-07-14 22:33:47 发布

Jarry96

最新推荐文章于 2021-07-14 22:33:47 发布

阅读量723

点赞数 1

本文链接：https://blog.csdn.net/qq_41107410/article/details/88097331

版权

本文介绍如何在PC端利用Canvas实现刮刮卡效果。通过Canvas对信息进行遮盖，运用destination-out操作符使刮擦区域变为透明。当刮擦面积达到一定比例时，隐藏信息显示。详细代码包括CSS、HTML和JS部分，并提供了预览链接。

摘要由CSDN通过智能技术生成

话不多说，先上效果:blogai.cn

主要思路是通过canvas对信息进行遮盖，通过使用destination-out对已涂颜色对冲，从而变得透明。

//使用globalCompositeOperation 中的destination-out ,使已经填充的颜色变透明;
        context.globalCompositeOperation = 'destination-out';

使用 getImageData计算canvas中的像素数,通过计算刮开的比例,当刮开超过一般时,遮盖信息显示到最上层(z-index)

具体代码如下:

css

 <style>
        * {
            box-sizing: border-box;
        }

        .card {
            position: absolute;
            width: 500px;
            height: 360px;
            box-shadow: 5px 4px 6px 2px #ccced1;
            top: 50%;
            left: 50%;
            transform: translateY(-50%) translateX(-50%);
            text-align: center;
        }

        .header {
            width: 100%;
            height: 240px;
            background: cornflowerblue;
            background: radial-gradient(15px at bottom left, transparent 50%, cornflowerblue 50%) bottom left,
            radial-gradient(15px a