Javascript 使用类似画布的绘画应用程序绘制多个形状

我正在尝试使用画布创建一个类似绘画的应用程序。我能用徒手工具画画，但当我尝试使用形状时，我们需要使用clearrect方法，我不能正确使用。我需要用鼠标在画布上绘制多个形状，但无法这样做

这里是我正在尝试的链接

HTML:

JS

---

在上面的链接中，当我试图将鼠标拖动到右侧时，可以绘制多个矩形，但当我将鼠标拖动到左侧时，无法绘制多个矩形。你能不能

我只是稍微改进了一下你的代码。当您试图在已经存在的矩形上绘制新矩形时，似乎遇到了一些问题

我创建了一个变量来存储绘制的矩形。它就像浏览器的大脑和代码的底部一样，我创建了一个setInterval函数，它可以以60fps的速度在大脑变量中重新绘制矩形

var drawerd_objects=[]//我们的大脑变量 var isDown； var启动； var端； var canvasEl=document.getElementByIddrawing； var draw=canvasEl.getContext2d； draw.lineWidth=2； draw.strokeStyle=蓝色； var lastWidth=0； var lastHeight=0； $drawing.mousedown函数{ isDown=真； start=getMousePoscanvasEl，e； end=getMousePoscanvasEl，e； lastWidth=0； 最后高度=0； e、 防止违约； }; $drawing.mouseupffunction{ 绘制对象。按{开始：开始，宽度：w，高度：h}； isDown=假； }; $drawing.mousemovefunction{ 如果！是向下返回； end=getMousePoscanvasEl，e； h=end.y-start.y； w=结束.x-开始.x； draw.clearRectstart.x-5、start.y-5、lastWidth+6、lastHeight+6； draw.beginPath； draw.rectstart.x，start.y，w，h； 最后宽度=w； 最后高度=h； 划水； 绘制封闭路径； }; //在这里我们再画一次旧的矩形。。 //一直在清理画布 设置间隔函数{ draw.clearRect0,0，draw.canvas.width，draw.canvas.height；

---

对于let i=0；我请在此处发布代码，不要仅链接它New here将在下一个问题中尝试这样做。。！！

var isDown;
var start;
var end;
var canvasEl = document.getElementById("drawing");
var draw = canvasEl.getContext("2d");
draw.lineWidth = "2";
draw.strokeStyle = "blue";
var lastWidth = 0;
var lastHeight = 0;

$("#drawing").mousedown(function(e) {
    isDown = true;
    start = getMousePos(canvasEl, e);
    end = getMousePos(canvasEl, e);
    lastWidth = 0;
    lastHeight = 0;
    e.preventDefault();
});

$("#drawing").mouseup(function() {
    isDown = false;
});

$("#drawing").mousemove(function(e) {
    if (!isDown) return;
    var end = getMousePos(canvasEl, e);
    var h = end.y - start.y;
    var w = end.x - start.x;
    draw.clearRect(start.x-5, start.y-5, lastWidth + 6, lastHeight + 6);
    draw.beginPath();
    draw.rect(start.x, start.y, w, h);
    lastWidth = w;
    lastHeight = h;
    draw.stroke();
    draw.closePath();
});


function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
        x: Math.floor(evt.clientX - rect.left),
        y: Math.floor(evt.clientY - rect.top)
    };
}