canvas实践——绘制刮刮卡

canvas实践——绘制刮刮卡

刮刮卡是一种常见的效果，如下图所示：

上述效果可以通过canvas中图像合成来实现，具体思路和代码如下：

1、利用css将刮刮卡的结果与canvas灰色涂层重叠；

• html

<div class="card-body">
    <!-- 灰色涂层 -->
    <canvas class="canvas">sorry, 浏览器不支持canvas</canvas>
    <!-- 刮卡结果 -->
    <div class="gift">谢谢参与</div>
</div>

• css

.card-body{
    
    position: relative;
    width: 340px;
    height: 160px;
    margin: 0 auto;
}
.canvas{
    
    /* 利用绝对定位让灰色涂层与刮卡结果重叠 */
    position: absolute; 
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
}
.gift{
    
    /* 利用绝对定位让灰色涂层与刮卡结果重叠 */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    font-size: 32px;
    text-align: center;
    line-height: 160px;
    background-color: #fcfcfc;
}

2、在canvas画布上绘制刮刮卡的灰色涂层；

// 获取canvas并设置其宽高
let canvas = document.querySelector('.canvas'),
    card = document.querySelector</