使用画布（如绘画应用程序）绘制多个形状答案

【问题标题】：Drawing multiple shapes using canvas like paint application使用画布（如绘画应用程序）绘制多个形状
【发布时间】：2017-07-11 20:00:59
【问题描述】：

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

这是我正在尝试的链接 http://jsfiddle.net/6vq64sdh/

HTML：

<canvas width="800px" height="600px" id="drawing"></canvas>

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)
    };
}

在上面的链接中，当我尝试将鼠标拖动到右侧时能够绘制多个矩形，但当我将其拖动到左侧时却无法绘制。请问可以吗

【问题讨论】：

请把代码贴在这里，不要只是链接它
new here 将在下一个问题中尝试这样做..!!

标签： javascript html canvas

【解决方案1】：

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

我创建了一个变量来存储绘制的矩形。（就像浏览器的大脑）在代码的底部，我创建了一个setInterval() 函数，用于重新绘制60fps 中大脑变量中的矩形。

var drawed_objects = []; //our brain variable
    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() {
      drawed_objects.push({start:start,width:w,height:h});
        isDown = false;
    });

    $("#drawing").mousemove(function(e) {
        if (!isDown) return;
        end = getMousePos(canvasEl, e);
        h = end.y - start.y;
        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();
    });

    //in here we drawing old rectangles again again again..
    //and all time clearing the canvas
    setInterval(function(){
      draw.clearRect(0,0,draw.canvas.width,draw.canvas.height);

      for( let i=0; i <drawed_objects.length; i++ )
      {
        var obj = drawed_objects[i];
        draw.beginPath();
        draw.rect(obj.start.x, obj.start.y, obj.width, obj.height);
        draw.stroke();
        draw.closePath();
      }

    },1000/60);

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas width="800px" height="600px" id="drawing"></canvas>

【讨论】：