从阵列帆布线清晰和重新绘制

Question

我在哪里尝试绘制从阵列的画布上线的一个问题。
我试图清除画布前一次的第一行绘制。
如果我清除画布我只得到绘制的，而不是所有的人的最后一行。

function drawAll() {
    for (var i = 0; i < lines.length; i++) {
        if (i == 0) {
            ctx2.clearRect(0, 0, canvas.width, canvas.height); // clears canvas 
        }
        ctx2.beginPath(); // needed to clear canvas if drawing lines
        ctx2.moveTo(lines[i].start.x, lines[i].start.y);
        ctx2.lineTo(lines[i].end.x, lines[i].end.y);
        ctx2.stroke();
    }
}

我做错什么了吗？

https://jsfiddle.net/1tgcd9xu/

Answer 1

您的问题不在图形部分中，而在线更新中（您可能希望在问题中包括在内）

正在使用一个且仅lineObj对象。

您更新的对象总是相同的，在数组中推送的对象始终是相同的对象。

因此，当您进入drawAll时，您的代码将正确地迭代对该同一个lineObj的所有引用，并正确绘制其当前状态，就像您向其推送新引用一样在阵列。

要修复此问题，至少每次将其推入Array时都需要创建一个新的Object。
但你也可能有兴趣在这些原型行，这样就可以利用辅助方法，这可能会派上用场，一旦您的项目会越来越大。

var canvas = document.getElementById("myCanvas");
var canvas2 = document.getElementById("myCanvas2");

var ctx = canvas.getContext("2d");
var ctx2 = canvas2.getContext("2d");
var rect = canvas.getBoundingClientRect();
var xPos;
var yPos;
var pressed = 0;
var lines = [];
var line = [];

function drawCanvas() {
  ctx.fillStyle = "rgb(255, 0, 0)";
  ctx.fillRect(0, 0, 150, 75);
  ctx2.fillStyle = "rgb(255, 0, 0)";
  ctx2.fillRect(0, 0, 150, 75);
}


function drawLine() {
  if (pressed != 0) { // stops from drawing a line after two mouse presses
    ctx.clearRect(0, 0, canvas.width, canvas.height); // clears canvas   
    ctx.beginPath(); // needed to clear canvas if drawing lines
    ctx.moveTo(xPos, yPos); //  line start
    endXPos = event.clientX - rect.left;
    endYPos = event.clientY - rect.top;
    ctx.lineTo(endXPos, endYPos);
    ctx.stroke();
    writeMessage();
  }
}

function drawAll() {
  // better to move it out of the loop
  if (lines.length) {
    ctx2.clearRect(0, 0, canvas.width, canvas.height); // clears canvas 
  }
  for (var i = 0; i < lines.length; i++) {
    ctx2.beginPath(); // needed to clear canvas if drawing lines
    ctx2.moveTo(lines[i].start.x, lines[i].start.y);
    ctx2.lineTo(lines[i].end.x, lines[i].end.y);
    ctx2.stroke();
  }
}

function writeMessage() {
  document.getElementById("coordinates").innerHTML =
  "Mouse Position: " +
    (event.clientX - rect.left) + ", " +
    (event.clientY - rect.top);
}

function mouseDownFunction(event) {
  pressed++;
  xPos = event.clientX - rect.left; // x and y cordinates of mouse on canvas
  yPos = event.clientY - rect.top;
  if (pressed == 1) { // reset our global lineObj
    lineObj.reset(xPos, yPos);
    ctx.moveTo(xPos, yPos);
  } else if (pressed == 2) { // update our global lineObj
    lineObj.update(xPos, yPos);
    ctx.lineTo(xPos, yPos)
    // push a clone of the current status
    lines.push(lineObj.clone());
    pressed = 0;
    drawAll();
  }
}
// LineObject Constructor
/**
 * @method reset(xPos, yPos) ::resets both `start` and `end` positions
 * @method update(xPos, yPos) ::Updates `end`
 * @method clone() ::Returns a new LineObject with this current positions
 *
 * Feel free to add more, like `draw`, `setColor`...
 *
*/
function LineObject(xPos, yPos) {
  this.start = {
    x: xPos,
    y: yPos
  };
  this.end = {
    x: xPos,
    y: yPos
  }
}
LineObject.prototype = {
  reset: function(xPos, yPos) {
    this.start.x = this.end.x = xPos;
    this.start.y = this.end.y = yPos;
  },
  update: function(xPos, yPos) {
    this.end.x = xPos;
    this.end.y = yPos;
  },
  clone: function() {
    var clone = new LineObject(this.start.x, this.start.y);
    clone.update(this.end.x, this.end.y);
    return clone;
  }
};
var lineObj = new LineObject();

canvas.addEventListener("mousemove", drawLine)
//   on mouse move inside canvas execute writeMessage

canvas.addEventListener("mousedown", mouseDownFunction)
//   on left click inside canvas execute setLineStart

<canvas id="myCanvas"></canvas>
<h1 id="coordinates"></h1>
<h1 id="hehe"></h1>
<canvas id="myCanvas2">
  Your browser does not support the canvas element.
</canvas>