只是为了好玩和学习，我正在尝试以 Visual Studio 的方式创建一个基于 Web 的表单编辑器。第一个要求是能够绘制矩形，以便在绘制时轮廓跟随鼠标移动。因此，每次鼠标移动时，之前绘制的矩形都应该被擦除。为了实现这一点，在绘制新矩形之前，我恢复了按下鼠标按钮时拍摄的画布快照。
这工作得很好，闪烁是可以理解的，但只要我保持鼠标的连续移动，就不会太令人不安。但我不明白的是，真正令人烦恼的是，一旦我停止鼠标移动超过一秒钟，矩形就会消失。 我在这个 Codepen [https://codepen.io/cbreemer/pen/mdgOQdQ] 中放置了一个最小的测试集，因此即使我的解释可能不是，问题也会很清楚。
我希望有人能告诉我我在这里缺少什么。
我认为也许在图像加载处理程序中移动矩形绘制代码（在鼠标移动处理程序中）可能会修复它。但遗憾的是，直到释放鼠标按钮我才看到任何东西。我想不出还有什么可以尝试的。
var ctx;
var startX, startY, endX, endY, lastX, lastY;
var rect;
var lastCanvas;
var isMouseDown = false;
function init()
{
rect = myCanvas.getBoundingClientRect();
ctx = myCanvas.getContext("2d");
ctx.lineWidth = 1;
ctx.strokeStyle = "black";
ctx.fillStyle = "wheat";
ctx.fillRect(0, 0, rect.width, rect.height);
myCanvas.addEventListener("mousemove",(e)=>
{
if ( isMouseDown )
{
var canvasPic = new Image();
canvasPic.src = lastCanvas;
canvasPic.addEventListener("load", (e)=> { ctx.drawImage(canvasPic, 0, 0); });
var x = e.clientX - rect.left;
var y = e.clientY - rect.top;
ctx.strokeRect(startX, startY, x-startX, y-startY);
lastX = x;
lastY = y;
}
});
myCanvas.addEventListener("mousedown",(e)=>
{
lastCanvas = myCanvas.toDataURL();
startX = e.clientX - rect.left;
startY = e.clientY - rect.top;
lastX = startX;
lastY = startY;
isMouseDown = true;
});
myCanvas.addEventListener("mouseup",(e)=>
{
isMouseDown = false;
endX = e.clientX - rect.left;
endY = e.clientY - rect.top;
ctx.strokeRect(startX, startY, endX-startX, endY-startY);
});
}<!DOCTYPE html>
<html>
<body onLoad="init();">
<canvas id="myCanvas" width="600" height="400" style="border:1px solid black"></canvas>
</body>
</html>取自我的另一个答案，这是在
requestAnimationFramegetImageDatalet canvas = document.querySelector(".result");
var ctx = canvas.getContext("2d");
//Loading of the home test image - img1
var img1 = new Image();
var imageData
//drawing of the test image - img1
img1.onload = function() {
//draw background image
ctx.drawImage(img1, 0, 0);
//draw a box over the top
ctx.fillStyle = "rgba(200, 0, 0, 0.5)";
ctx.fillRect(0, 0, 400, 200);
imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
drawRect()
};
img1.crossOrigin = "Anonymous";
img1.src = 'https://picsum.photos/400/200';
function drawRect() {
let SldrVal = document.getElementById("MySldr").value;
//ctx.strokeStyle = "#305ef2";
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.putImageData(imageData, 0, 0);
ctx.beginPath();
ctx.arc(canvas.width / 2, canvas.height / 2, SldrVal, 0, 2 * Math.PI);
ctx.stroke();
ctx.font = "32px Arial";
ctx.fillText(SldrVal, 10, 50);
requestAnimationFrame(drawRect)
}<input type="range" id="MySldr" value="15" min="1" max="100">
<br>
<canvas class="result" width="400" height="200"></canvas>