通过JavaScript实现刮刮乐学习canvas的globalCompositionOperation

HTML部分

通过canvas实现刮刮乐上面的图层。

<div class="container">
    <div class="charactor cover">12345</div>
    <div class="cover">
        <canvas id="canvas"></canvas>
    </div>
</div>

样式设置

将内容.charactor和涂层.cover[1]设置为相同的定位。

 .container {
            width: 200px;
            height: 100px;
            position: relative;
        }

        .charactor {
            font-size: 50px;
            color: red;
            text-align: center;
            line-height: 100px;
        }

        .cover {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }

实现刮刮乐效果

var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    context.beginPath();
    context.fillRect(0,0,200,100);
    context.fillStyle = 'gray';
    context.closePath();
    //上面实现涂层覆盖内容部分,效果如下：

//下面在鼠标按下后移动鼠标才可将涂层擦除，鼠标松开后移动鼠标不会擦除涂层。
    canvas.addEventListener('mousedown',function () {
        canvas.addEventListener('mousemove',getMove);
    });
    function getMove() {
        var e = arguments[0];
        var x = e.offsetX;
        var y = e.offsetY;
        //offsetX表示鼠标相对于当前元素的偏移量

        //下面以当前按下鼠标移动的点为圆心画圆
        context.beginPath();
        context.arc(x,y,10,0,2*Math.PI);
        context.fill();
        //下面是显示画布上当前画到的圆之外的部分
        context.globalCompositeOperation = 'destination-out';
        context.closePath();
    }
    canvas.addEventListener('mouseup',function () {
        canvas.removeEventListener('mousemove',getMove);
    });

详解canvas的globalCompositionOperation属性

将原本在画布上的图像记为目标图像destination ，将要涂在画布上的图像记为原图像source。

• source-over表示原图像会覆盖目标图像。
• source-atop表示目标图像会全部显示，原图像只显示其和目标图像相交的部分,原图像在上
• source-in表示目标图像透明，原图像只显示其和目标图像相交的部分
• source-out表示目标图像透明，原图像只显示其和目标图像相交以外部分
• destination-over表示目标图像会覆盖原图像。
• destination-atop表示原图像会全部显示，目标图像只显示其和原图像相交的部分，目标图像在上
• destination-in表示原图像透明，目标图像只显示其和原图像相交的部分
• destination-out表示原图像透明，目标图像只显示其和原图像相交以外部分，如上面的刮刮乐，即鼠标滑过的地方显示透明，其余地方颜色不变。
• lighter表示原图像和目标图像重叠
• copy只显示原图像，忽略目标图像
• xor不显示相交的部分