Javascript 如何显示用户矩形的外观？

我试图在画布上画一个矩形，点击一下，移动一下鼠标，再点击一下。在第一次单击并在画布上显示填充矩形的预览后，我应该如何跟踪用户的光标，该矩形在任何给定坐标下的形状

到目前为止，我可以成功地创建矩形，而不显示矩形在任何坐标下的外观

以下是迄今为止的代码：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var canvasOffset = $("#canvas").offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;

var startX;
var startY;
var drawingShape = false;

//function getMousePos(canvas, ev) {
//var rect = canvas.getBoundingClientRect();
//}

//canvas.addEventListener('mousemove', function (ev) {
//var mousePos = getMousePos(canvas, ev);
//} 

function setMousePosition(e) {
    mouseX = parseInt(e.clientX - offsetX);
    mouseY = parseInt(e.clientY - offsetY);
    $("#downlog").html("Down: " + mouseX + " / " + mouseY);


    if (drawingShape) {
        drawingShape = false;
        ctx.beginPath();
        ctx.fillStyle = "#FF0000";
        ctx.rect(startX, startY, mouseX - startX, mouseY - startY);
        ctx.fill();

    } else {
        drawingShape = true;
        startX = mouseX;
        startY = mouseY;
    }
}

$("#canvas").mousedown(function (e) {
    setMousePosition(e);
});

---

正如我在本HTML5教程中所看到的，我尝试使用事件侦听器进行鼠标移动，但我不确定如何将其与现有代码连接。

您可以在开始绘制图像时存储图像，并在每次编辑图像时重新加载图像。 下面是我基于您的代码的快速实现，它需要一些优化，也许只需要捕获您计划绘制的区域：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var canvasOffset = $("#canvas").offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;

var startX;
var startY;
var drawingShape = false;
var oldImage;

canvas.addEventListener('mousemove', function(e){
  if(drawingShape){
    ctx.putImageData(oldImage,0,0);
    mouseX = parseInt(e.clientX - offsetX, 10);
    mouseY = parseInt(e.clientY - offsetY, 10);

    ctx.beginPath();
    ctx.fillStyle = "#FF0000";
    ctx.rect(startX, startY, mouseX - startX, mouseY - startY);
    ctx.fill();
  }
});

function setMousePosition(e) {
mouseX = parseInt(e.clientX - offsetX, 10);
mouseY = parseInt(e.clientY - offsetY, 10);
$("#downlog").html("Down: " + mouseX + " / " + mouseY);


  if (drawingShape) {
    drawingShape = false;
    ctx.beginPath();
    ctx.fillStyle = "#FF0000";
    ctx.rect(startX, startY, mouseX - startX, mouseY - startY);
    ctx.fill();

  } else {
    drawingShape = true;
    startX = mouseX;
    startY = mouseY;
    oldImage = ctx.getImageData(0,0,canvas.width,canvas.height);
  }
}

$("#canvas").mousedown(function (e) {
    setMousePosition(e);
});

---

注意我们如何将图像数据存储在mouse down事件中，并在每次鼠标移动时从您为试图帮助的人提供的代码中检索图像数据：谢谢，我现在明白了！