JavaScript Graphics 2D 中矩形绘制闪烁问题怎么解决？

2024-03-13 02:27:17

JavaScript 中 Graphics 2D 矩形绘制闪烁问题与解决方案

问题概述

在 JavaScript Graphics 2D 中绘制矩形时，您可能会遇到闪烁问题，即矩形会在鼠标移动时消失。本文将深入探讨这一问题并提供有效解决方案，确保您的矩形绘制平稳无闪烁。

原因分析

矩形绘制闪烁的根本原因在于，当鼠标停止移动时，画布未及时更新。在鼠标移动事件处理程序中，我们通过调用 drawImage() 函数将画布的快照绘制到画布上，从而擦除先前的矩形。然而，一旦鼠标停止移动，将不再触发鼠标移动事件，因此画布不会更新。

解决方法

要解决这个问题，我们需要在鼠标按下事件处理程序中保存画布的初始快照，然后在鼠标移动事件处理程序中持续绘制矩形。这样做可以确保即使鼠标停止移动，画布也会及时更新。

优化代码

以下是优化后的代码片段：

var canvasImage;
var ctx, rect, startX, startY, endX, endY;
window.addEventListener("load", init);

function init() {
  rect = canvas.getBoundingClientRect();
  ctx = canvas.getContext("2d");

  canvas.addEventListener("mousedown", handleMouseDown);
  canvas.addEventListener("mousemove", handleMouseMove);
  canvas.addEventListener("mouseup", handleMouseUp);
}

function handleMouseDown(e) {
  canvasImage = canvas.toDataURL();
  startX = e.clientX - rect.left;
  startY = e.clientY - rect.top;
}

function handleMouseMove(e) {
  if (!canvasImage) return;
  ctx.drawImage(canvasImage, 0, 0);

  endX = e.clientX - rect.left;
  endY = e.clientY - rect.top;
  ctx.strokeRect(startX, startY, endX - startX, endY - startY);
}

function handleMouseUp(e) {
  canvasImage = null;
}