我是HTML画布元素的新手，但最近两天一直在使用它。我在Django中工作，我的任务是当鼠标在画布堆栈上移动时，显示隐藏在另一个画布(纯白色矩形)下的图像(加载到画布上)。两幅画布的宽度和高度完全相同。
我还希望能够设置光标的形状(正方形或圆形)和尺寸；擦除"；顶部画布的(显示下面的图像)。
我已经看了一个类似问题的答案，但有点迷失在链接的fiddle中编写的javascript上。我的HandleMouseMove函数是我第一次尝试识别鼠标在顶部画布中的位置。任何指导都将不胜感激，并提前表示感谢。以下是我目前所拥有的：
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>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"：
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);