使用画布(如油漆应用程序)绘制多个形状

Question

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

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

.HTML：

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

.JS

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

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

Answer 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>