canvas实战之刮刮卡

1.效果图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pQeH0DOW-1596636799439)(https://s1.ax1x.com/2020/08/05/a6GU5n.png)]

2.html及css

<canvas id="myCanvas">
        您的浏览器不支持canvas,请升级！
    </canvas>
    
    
     <style>
        * {
            margin: 0;
            padding: 0;
        }
        body,html{
            width: 100%;
            height: 100%;
        }
        #myCanvas{
            background:url("images/banner.jpeg") no-repeat;
            background-size:cover;
        }
    </style>

3.js

<script>
        (function(){
            var canvasNode = document.querySelector("#myCanvas");
            canvasNode.width = window.innerWidth;
            canvasNode.height = window.innerHeight;
            var ctx = canvasNode.getContext('2d');

            // 绘制覆盖层  目标图像
            ctx.fillStyle = '#ccc';
            ctx.fillRect(0,0,canvasNode.width,canvasNode.height);


             // 图片合成
            ctx.globalCompositeOperation = 'destination-out';


            ctx.lineWidth = 30;
            ctx.lineCap = 'round';


            // 签名板  源图像
            canvasNode.onmousedown = function(event) {
                    ctx.beginPath();
                    ctx.moveTo(event.offsetX,event.offsetY);
                
                document.onmousemove = function(event) {
                    ctx.lineTo(event.clientX - canvasNode.offsetLeft,event.clientY - canvasNode.offsetTop);
                    ctx.stroke();
                };
                document.onmouseup = function() {
                    this.onmousemove = null;
                }
            }


        })();
    </script>

4…总结

• 这个案例主要是搞清楚这个属性 globalCompositeOperation 属性设置或返回如何将一个源（新的）图像绘制到目标（已有）的图像上。注意值是用的 destination-out，在源图像之外显示目标图像。只有源图像之外的目标图像部分会被显示，源图像是透明的。
• 在设置图片合成方式那里，注意前面是目标图像，后面是源图像。