合并两个画布文件

Question

轴辅助代码：

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

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

    const AXIS_LENGTH = 50; // Length of the axis lines

    function drawAxis(mouseX, mouseY) {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      // Draw vertical axis line
      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();
    }

    document.addEventListener("mousemove", function (event) {
      const mouseX = event.clientX;
      const mouseY = event.clientY;

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

      drawAxis(invertedX, invertedY);
    }); 

和

main.js :

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

let isDrawing = false;
let lastX = 0;
let lastY = 0;

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

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

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

    ctx.strokeStyle = 'black';
    ctx.lineWidth = 5;
    ctx.lineCap = 'round';

    ctx.beginPath();
    ctx.moveTo(lastX, lastY);
    ctx.lineTo(x, y);
    ctx.stroke();

    [lastX, lastY] = [x, y];
}

function stopDrawing() {
    isDrawing = false;
}

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

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

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


// Listen for window resize event
window.addEventListener('resize', resizeCanvas);

我希望轴助手位于反转鼠标坐标的位置。因此，当我绘制反向笔划时，轴将作为笔划出现位置的指南

我尝试直接在我的主 js 文件中键入该函数，但它不起作用。我可以看到轴，但当我尝试绘制时，它会变宽并且不会出现笔划。或者有没有办法同时使用 2 个画布元素，并且元素的索引也相同。

Answer 1

我把它们结合起来了。诀窍在于，一个画布会保留绘图，而另一个画布会在绘图之前自行清除。解决方案？每次都画一切。我在绘制时存储鼠标位置的 [x,y]，因此我可以在每次迭代时重新绘制它们。

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

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

canvas {
  background: gray;
}

<canvas id="canvas"></canvas>