HTML Canvas 合成：在另一个 canvas 下方显示 canvas 图像

Question

我是 HTML canvas 元素的新手，但过去两天一直在使用它。我在 Django 工作，我的任务是在鼠标移过时显示隐藏在另一个 canvas（纯白色矩形） 下方的图像（加载到 canvas） canvas 堆栈。两个 canvas 的宽度和高度完全相同。

我还希望能够在“擦除”顶部 canvas（显示下面的图像）时设置光标的形状（正方形或圆形）和尺寸。

我看过 the answer to a similar question，但对链接 fiddle 中写的 javascript 有点迷茫。我的 HandleMouseMove 函数是我尝试确定顶部鼠标位置的初步尝试 canvas。任何指导将不胜感激并提前致谢。这是我目前所拥有的：

window.onload = function() {
    //Create Bottom canvas & context
    var canvas = document.getElementById('canvas');
    var ctxB = canvas.getContext('2d');
    
    //Create Top canvas & context
    var canvas2 = document.getElementById('canvas2');
    var ctxT = canvas2.getContext('2d');

    //Set waterfall image variable
    var waterfall = document.getElementById('waterfall');

    //Set canvas w&h properties
    canvas.width = canvas2.width = waterfall.width;
    canvas.height = canvas2.height = waterfall.height;

    //Populate Bottom canvas with image
    ctxB.drawImage(waterfall, 0, 0, canvas.width, canvas.height);

    //Populate Top canvas with white rectangle
    ctxT.fillStyle = "white";
    ctxT.fillRect(0, 0, canvas2.width, canvas2.height);
}
        
//Show Coordinates of mouse on Top canvas
function HandleMouseMove(event) {
    var x = event.clientX;
    var y = event.clientY;
    var coords = x + ", " + y;
    document.getElementById("demo").innerHTML = coords;  
}

//Erase Top canvas to reveal waterfall

#stack {
    position: relative;
}
#stack > canvas {
    position: absolute;
    display: block;
    width: 40%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 25px;
}

<!DOCTYPE html>
{% load static %}
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="{% static 'entrance/entrance.css' %}">
        <script src="{% static 'entrance/entrance.js' %}"></script>
    </head>

    <body>
        <p hidden>
            <img src="{% static 'entrance/Waterfall.jpg' %}" alt="issue here" id="waterfall" />
        </p>
        <p id="demo"></p>
        <div id="stack">
            <canvas id="canvas"></canvas>
            <canvas id="canvas2" onmousemove="HandleMouseMove(event)"></canvas>
        </div>
    </body>
</html>

Answer 1

window.onload = function() {
    //Create Bottom canvas & context
    var canvas = document.getElementById('canvas');
    var ctxB = canvas.getContext('2d');
    
    //Create Top canvas & context
    var canvas2 = document.getElementById('canvas2');
    var ctxT = canvas2.getContext('2d');

    //Set waterfall image variable
    var waterfall = document.getElementById('waterfall');

    //Set canvas w&h properties
    canvas.width = canvas2.width = waterfall.width;
    canvas.height = canvas2.height = waterfall.height;

    //Populate Bottom canvas with image
    ctxB.drawImage(waterfall, 0, 0, canvas.width, canvas.height);

    //Populate Top canvas with white rectangle
    ctxT.fillStyle = "white";
    ctxT.fillRect(0, 0, canvas2.width, canvas2.height);
    

    canvas2.addEventListener('mousemove', event => {
      var x = event.offsetX;
      var y = event.offsetY;
      var coords = x + ", " + y;
      document.getElementById("demo").innerHTML = coords;

      //Erase Top canvas to reveal waterfall
      const eraseSize = 15;
      ctxT.clearRect(x - eraseSize/2, y - eraseSize/2, eraseSize, eraseSize);
    })
}

#stack {
    position: relative;
}
#stack > canvas {
    position: absolute;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 25px;
}

<p hidden>
    <img src="http://vignette4.wikia.nocookie.net/plantsvszombies/images/8/8f/Kiwi_bird.png" alt="issue here" id="waterfall" />
</p>
<p id="demo"></p>
<div id="stack">
    <canvas id="canvas"></canvas>
    <canvas id="canvas2"></canvas>
</div>

要改变形状，设置 globalCompositeOperation = 'destination-out' 为顶部 canvas:

ctxT.globalCompositeOperation = 'destination-out';

然后画出你想要的任何形状。比如圆圈：

ctxT.beginPath();
ctxT.arc(x, y, eraseSize, 0, Math.PI*2, false);
ctxT.fill();
ctxT.closePath();

而不是

ctxT.clearRect(x - eraseSize/2, y - eraseSize/2, eraseSize, eraseSize);

HTML Canvas 合成：在另一个 canvas 下方显示 canvas 图像

HTML Canvas Compositing: Reveal canvas image underneath another canvas

html

canvas

mousemove