Canvas之刮刮乐

Canvas之刮刮乐

(() => { 
canvas = document.createElement('canvas');
document.body.append(canvas);
canvas.width = 300;
canvas.height = 200;
const ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.fillStyle = '#ccc';
ctx.fillRect(0, 0, 300, 200);

ctx.globalCompositeOperation = 'destination-out';

ctx.beginPath();
ctx.strokeStyle = '#fff';
ctx.lineWidth = 20;
ctx.lineCap = 'round';
ctx.lineJoin = 'round';
canvas.addEventListener('mousedown', function (e) {
    ctx.lineTo(e.offsetX, e.offsetY);
    ctx.stroke();
    function handle (e) {
        ctx.lineTo(e.offsetX, e.offsetY);
        ctx.stroke();
    }
    canvas.addEventListener('mousemove', handle);
    //鼠标抬起
    canvas.addEventListener('mouseup', function (e) {
        console.log('mouseup')
        canvas.removeEventListener('mousemove',handle);
    });
    //鼠标离开
    canvas.addEventListener('mouseout', function (e) {
        console.log('mouseout')
        canvas.removeEventListener('mousemove',handle);
    })
});
})();

利用了图像合成中的 destination-out 。它会显示两张图片中前面图片不重叠的部分，当我们在使用鼠标移动的时候，重叠的部分不会显示，显示出底层的中奖图片。不重叠的部分会继续显示前面的部分。
当鼠标抬起和鼠标离开的时候，结束线条的绘制过程，移除相关的事件。可以使用圆形绘制，但比较麻烦，可以直接使用线条绘制，然后加上 ctx.lineCap 和 ctx.lineJoin 的圆形属性。