HTML Canvas Compositing：在另一个画布下显示画布图像
Posted
技术标签:
【中文标题】HTML Canvas Compositing：在另一个画布下显示画布图像【英文标题】：HTML Canvas Compositing: Reveal canvas image underneath another canvas 【发布时间】：2021-12-11 11:50:13 【问题描述】：我是 html 画布元素的新手，但最近两天一直在使用它。我在 Django 中工作，我的任务是显示隐藏在另一个画布（纯白色矩形）下方的图像（加载到画布上）当鼠标在画布堆栈上移动时。两个画布的宽度和高度完全相同。
我还希望能够在“擦除”顶部画布（显示下方的图像）时设置光标的形状（方形或圆形）和尺寸。
我看过the answer to a similar question，但对链接小提琴中编写的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' %" id="waterfall" />
</p>
<p id="demo"></p>
<div id="stack">
<canvas id="canvas"></canvas>
<canvas id="canvas2" onmousemove="HandleMouseMove(event)"></canvas>
</div>
</body>
</html>【问题讨论】：
【参考方案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" 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);
【讨论】：
非常感谢！这正是我所需要的，而且我喜欢代码量如此之少——非常优雅。再次感谢您抽出宝贵时间提供帮助！以上是关于HTML Canvas Compositing：在另一个画布下显示画布图像的主要内容，如果未能解决你的问题，请参考以下文章
垂直视口被赋予了无限的高度。 RenderBox 未布置：RenderViewport#34d12 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UP