橡皮擦使画布完全变白

Question

main.js：

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

let isDrawing = false;
let lastX = 0;
let lastY = 0;
const AXIS_LENGTH = 50; // Length of the axis lines
let mouseX;
let mouseY;

// history so we can always redraw
var points = []
var allPoints = []
var invertedX, invertedY

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

function startDrawing(e) {
  isDrawing = true;
  [lastX, lastY] = [canvas.width - (e.pageX - canvas.offsetLeft), canvas.height - (e.pageY - canvas.offsetTop)];
  points = []
  allPoints.push(points)
  points.push([lastX, lastY])


}

function draw(e) {
  if (!isDrawing) return;

  const x = canvas.width - (e.pageX - canvas.offsetLeft);
  const y = canvas.height - (e.pageY - canvas.offsetTop);

  [lastX, lastY] = [x, y];
  points.push([lastX, lastY])

}

function stopDrawing() {
  isDrawing = false;
}


function clearCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
}

function resizeCanvas() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
}

function drawAllPoints() {
  allPoints.forEach(drawPoints)

}

function drawPoints(points) {

  if (points.length) {
    ctx.save()
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 5;
    ctx.lineCap = 'round';
    ctx.beginPath();
    ctx.moveTo(points[0][0], points[0][1]);
    for (var i = 1; i < points.length; i++) {
      ctx.lineTo(points[i][0], points[i][1]);
      ctx.stroke();

    }
    ctx.restore()
  }
}

function drawEverything() {
  clearCanvas()
  drawAxis();
  drawAllPoints()

}

function drawAxis() {

  mouseX = invertedX
  mouseY = invertedY
  // Draw vertical axis line
  ctx.save()
  ctx.beginPath();
  ctx.moveTo(mouseX, mouseY - AXIS_LENGTH / 2);
  ctx.lineTo(mouseX, mouseY + AXIS_LENGTH / 2);
  ctx.stroke();

  // Draw horizontal axis line
  ctx.beginPath();
  ctx.moveTo(mouseX - AXIS_LENGTH / 2, mouseY);
  ctx.lineTo(mouseX + AXIS_LENGTH / 2, mouseY);
  ctx.stroke();
  ctx.restore()
}


canvas.addEventListener('mousedown', startDrawing);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', stopDrawing);
canvas.addEventListener('mouseout', stopDrawing);
canvas.addEventListener('touchstart', (e) => {
  e.preventDefault();
  startDrawing(e.touches[0]);
});
canvas.addEventListener('touchmove', (e) => {
  e.preventDefault();
  draw(e.touches[0]);
});
canvas.addEventListener('touchend', stopDrawing);
window.addEventListener('resize', resizeCanvas);
document.addEventListener("mousemove", function(event) {
  const mouseX = event.clientX;
  const mouseY = event.clientY;

  invertedX = window.innerWidth - mouseX;
  invertedY = window.innerHeight - mouseY;

  drawEverything()
});

当我尝试通过单击擦除按钮来擦除画布时，画布中的每一笔都变成白色。我还有一个十字线的东西，显示要绘制笔划的位置。控件被颠倒了。我使用 if else 进行绘制和擦除。我使用白色作为笔划，作为橡皮擦工具。但是当我单击 btn 并尝试拖动时，所有内容都会变成白色，但再次单击 btn 会使所有内容都变成黑色。

Answer 1

嘿又是我，来自合并两个画布文件

请记住，画布是从内存变量

allPoints

重新绘制的。所以我们将为该变量添加颜色。顺便说一句，这将使保存和恢复绘图变得更容易，因为它已经表示为变量。

此外，我们正在

mousemove

上重新绘制画布。让我们纠正并使用

requestAnimationFrame

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

let isDrawing = false;
let lastX = 0;
let lastY = 0;
const AXIS_LENGTH = 50; // Length of the axis lines
let mouseX;
let mouseY;


// history so we can always redraw
var points = []
var stroke = {}
var allPoints = []
var invertedX, invertedY
var chosenColor = "black"

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

function startDrawing(e) {
  isDrawing = true;
  [lastX, lastY] = [canvas.width - (e.pageX - canvas.offsetLeft), canvas.height - (e.pageY - canvas.offsetTop)];
  points = []
  stroke = {
    points: points,
    color: chosenColor
  }
  allPoints.push(stroke)
  points.push([lastX, lastY])
}


function drawColorButtons() {
  document.querySelectorAll(".toolbar .btn").forEach(function(btn) {
    var color = btn.getAttribute("data-color")
    btn.style.backgroundColor = color
    btn.addEventListener('click', function() {
      chosenColor = color
    })
  })
}
drawColorButtons()

function draw(e) {
  if (!isDrawing) return;

  const x = canvas.width - (e.pageX - canvas.offsetLeft);
  const y = canvas.height - (e.pageY - canvas.offsetTop);

  [lastX, lastY] = [x, y];
  points.push([lastX, lastY])

}

function stopDrawing() {
  isDrawing = false;
}


function clearCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
}

function resizeCanvas() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
}

function drawAllPoints() {
  allPoints.forEach(drawStroke)

}

function drawStroke(stroke) {
  drawPoints(stroke.points, stroke.color)
}

function drawPoints(points, color) {
  if (points.length) {
    ctx.save()
    ctx.strokeStyle = color;
    ctx.lineWidth = 5;
    ctx.lineCap = 'round';
    ctx.beginPath();
    ctx.moveTo(points[0][0], points[0][1]);
    for (var i = 1; i < points.length; i++) {
      ctx.lineTo(points[i][0], points[i][1]);
      ctx.stroke();
    }
    ctx.restore()
  }
}

function drawEverything() {
  clearCanvas()
  drawAxis();
  drawAllPoints()
  requestAnimationFrame(drawEverything)
}
drawEverything()


function drawAxis() {

  mouseX = invertedX
  mouseY = invertedY
  // Draw vertical axis line
  ctx.save()
  ctx.strokeStyle = chosenColor;

  ctx.beginPath();
  ctx.moveTo(mouseX, mouseY - AXIS_LENGTH / 2);
  ctx.lineTo(mouseX, mouseY + AXIS_LENGTH / 2);
  ctx.stroke();

  // Draw horizontal axis line
  ctx.beginPath();
  ctx.moveTo(mouseX - AXIS_LENGTH / 2, mouseY);
  ctx.lineTo(mouseX + AXIS_LENGTH / 2, mouseY);
  ctx.stroke();
  ctx.restore()
}


canvas.addEventListener('mousedown', startDrawing);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', stopDrawing);
canvas.addEventListener('mouseout', stopDrawing);
canvas.addEventListener('touchstart', (e) => {
  e.preventDefault();
  startDrawing(e.touches[0]);
});
canvas.addEventListener('touchmove', (e) => {
  e.preventDefault();
  draw(e.touches[0]);
});
canvas.addEventListener('touchend', stopDrawing);
window.addEventListener('resize', resizeCanvas);
document.addEventListener("mousemove", function(event) {
  const mouseX = event.clientX;
  const mouseY = event.clientY;

  invertedX = window.innerWidth - mouseX;
  invertedY = window.innerHeight - mouseY;

});

body {
  padding: 0;
  margin: 0;
  overflow: hidden;
}

canvas {
  background: gray;
  display: block;
}

.toolbar {
  position: absolute;
  z-index: 1;
  top: 20px;
  left: 20px;
  display: flex;
}

.btn {
  width: 20px;
  height: 20px;
  border: 1px solid black;
  margin-right: 2px;
  cursor: pointer;
}

<canvas id="canvas"></canvas>
<div class="toolbar">
  <div class="btn" data-color="black"></div>
  <div class="btn" data-color="white"></div>
  <div class="btn" data-color="gray"></div>
  <div class="btn" data-color="red"></div>
  <div class="btn" data-color="green"></div>
  <div class="btn" data-color="yellow"></div>
  <div class="btn" data-color="blue"></div>
</div>