效果

老规矩线上效果图, 如下图

这里写图片描述

原理

主要基于canvas的图形组合 context.globalCompositeOperation这个函数.
图形组合就是两个图形相互叠加了图形的表现形式,是后画的覆盖掉先画的呢，还是相互重叠的部分不显示等等，至于怎么显示就取决于type的值了.
type：

    source-over（默认值）:在原有图形上绘制新图形

    destination-over:在原有图形下绘制新图形

    source-in:显示原有图形和新图形的交集，新图形在上，所以颜色为新图形的颜色

    destination-in:显示原有图形和新图形的交集，原有图形在上，所以颜色为原有图形的颜色

    source-out:只显示新图形非交集部分

    destination-out:只显示原有图形非交集部分

    source-atop:显示原有图形和交集部分，新图形在上，所以交集部分的颜色为新图形的颜色

    destination-atop:显示新图形和交集部分，新图形在下，所以交集部分的颜色为原有图形的颜色

    lighter:原有图形和新图形都显示，交集部分做颜色叠加

    xor:重叠飞部分不现实

    copy:只显示新图形

type值效果图:

这里写图片描述

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>刮刮乐</title>
</head>
<body>
    <canvas style="border: 1px solid black; background: url(dog.jpg)" id="myImg"></canvas>
    <img src="dog.jpg" style="display: none;">
    <script>
        var canvas = document.getElementById('myImg');
        var Img = document.getElementsByTagName('img')[0];
        canvas.width = 300;
        canvas.height = 300;
        var context = canvas.getContext("2d");
        context.fillStyle = '#CCC';
        context.fillRect(0, 0, 300, 300);
        canvas.onmousedown = function() {
            canvas.onmousemove = function(e) {
                var e = e || window.event;
                // e.clientX, e.clientY
                context.globalCompositeOperation = 'destination-out';
                context.beginPath();
                context.arc(e.clientX, e.clientY, 20, 0, Math.PI*2, false);//获取当前鼠标的横纵坐标作为填充的位置
                context.fillStyle = "rgba(0,0,0,1)";
                context.fill();
            }
        }
        canvas.onmouseup = function() {
            canvas.onmousemove = '';
        }
    </script>
</body>
</html>