globalCompositeOperation的小栗子---刮刮卡(含源代码）

本文链接：https://blog.csdn.net/Yannnnnm/article/details/109401528

上一篇博客我们讲解了canvas的globalCompositeOperation的属性，了解了源图像和目标图像以及他的一些属性值，这一篇我们运用这个属性来做一个小案例–刮刮卡

实现

先把图片放上去，然后放一个一样大的canvas标签放在上面，。以实现我们后面的刮开效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        body,
        html {
            width: 100%;
            height: 100%;
        }
        
        img {
            display: block;
            width:800px;
            height: 600px;
        }
        
        canvas {
            display: block;
            /* 覆盖在照片上 */
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>

<body onload="draw()">
    <img src="7.jpg" alt="" />
    <canvas width="800" height="600"></canvas>
</body>
</html>

运用canvas绘图的准备

获取画笔
开始路径

画一个一样大的灰色背景在上面覆盖图片

  function draw() {
            var oCanvas = document.querySelector("canvas");
            if (oCanvas.getContext) {
                var ctx = oCanvas.getContext("2d");
                ctx.beginPath();
                ctx.fillStyle = "gray";
                ctx.fillRect(0, 0, oCanvas.width, oCanvas.height);}
                }

开始刮图部分
回顾一下

globalCompositeOperation 属性设置或返回如何将一个源（新的）图像绘制到目标（已有）的图像上。
源图像 = 您打算放置到画布上的绘图。
目标图像 = 您已经放置在画布上的绘图。
这里要运用在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。destination-out

 ctx.globalCompositeOperation = "destination-out";
                // 设置每一次刮开的距离
                ctx.lineWidth = 20;
                ctx.lineCap = 'round'; //改变画笔的样式，圆头
                oCanvas.onmousedown = function(e) {
                    var el = e || window.event;
                    var x = el.offsetX;
                    var y = el.offsetY;
                    // 开始路径
                    ctx.beginPath();
                    // 移动到鼠标按下的地方
                    ctx.moveTo(x, y);
                }
                oCanvas.onmousemove = function(e) {
                    var el = e || window.event;
                    var x = el.offsetX;
                    var y = el.offsetY;
                    // 从按下的地方到移动的地方绘制直线路径 
                    ctx.lineTo(x, y);
                    // 这一块用描边让下面的图片露出来，实现效果
                    ctx.stroke();
                }
                oCanvas.onmouseup = function(e) {
                    // 清除移动事件
                    oCanvas.onmousemove = ''
                }

到这里就基本结束了
让我们先看一下效果图，和随便刮了几下图
在这里插入图片描述

在这里插入图片描述最喜欢的李圣经欧尼
完整代码欢迎自取

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        body,
        html {
            width: 100%;
            height: 100%;
        }
        
        img {
            display: block;
            width: 800px;
            height: 600px;
        }
        
        canvas {
            display: block;
            /* 覆盖在照片上 */
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>

<body onload="draw()">
    <img src="7.jpg" alt="" />
    <canvas width="800" height="600"></canvas>
    <script>
        function draw() {
            var oCanvas = document.querySelector("canvas");
            if (oCanvas.getContext) {
                var ctx = oCanvas.getContext("2d");
                ctx.beginPath();
                ctx.fillStyle = "gray";
                ctx.fillRect(0, 0, oCanvas.width, oCanvas.height);
                ctx.globalCompositeOperation = "destination-out";
                // 设置每一次刮开的距离
                ctx.lineWidth = 20;
                ctx.lineCap = 'round'; //改变画笔的样式，圆头
                oCanvas.onmousedown = function(e) {
                    var el = e || window.event;
                    var x = el.offsetX;
                    var y = el.offsetY;
                    // 开始路径
                    ctx.beginPath();
                    // 移动到鼠标按下的地方
                    ctx.moveTo(x, y);
                }
                oCanvas.onmousemove = function(e) {
                    var el = e || window.event;
                    var x = el.offsetX;
                    var y = el.offsetY;
                    // 从按下的地方到移动的地方绘制直线路径 
                    ctx.lineTo(x, y);
                    // 这一块用描边让下面的图片露出来，实现效果
                    ctx.stroke();
                }
                oCanvas.onmouseup = function(e) {
                    // 清除移动事件
                    oCanvas.onmousemove = ''
                }
            }
        }
    </script>
</body>

</html>