javascript - JS Canvas : lineTo()

Question

我是 JavaScript 新手!

如何将变量分配给当前的 xy 坐标，以便我可以使用相对位置来绘制线条？尝试用键盘进行 eclipse 刻草图。上、下、左、右箭头键...使用 JS、CSS 和 HTML。

谢谢!

window.addEventListener("keydown", keyd);
function keyd(event) {
  var etchMain = document.getElementById('etchMain');
  var etchContext = etchMain.getContext('2d');
  var key = event.keyCode;
  **var etchContextPositionX;
  var etchContextPositionY;**
  if (key == 37) {
    // left arrow
    if (etchMain.toDataURL() == document.getElementById('blank').toDataURL()) {
      etchContext.beginPath();
      etchContext.moveTo(etchMain.width / 2, etchMain.height / 2);
      // arrow specific drawing goes here
    }
    else {

    }
  }
  if (key == 38) {
    // up arrow
    if (etchMain.toDataURL() == document.getElementById('blank').toDataURL()) {
      etchContext.beginPath();
      etchContext.moveTo(etchMain.width / 2, etchMain.height / 2);
      // arrow specific drawing goes here
    }
    else {

    }
  }
  if (key == 39) {
    // right arrow
    if (etchMain.toDataURL() == document.getElementById('blank').toDataURL()) {
      etchContext.beginPath();
      etchContext.moveTo(etchMain.width / 2, etchMain.height / 2);
      // arrow specific drawing goes here
    }
    else {

    }
  }
  if (key == 39) {
    // down arrow
    if (etchMain.toDataURL() == document.getElementById('blank').toDataURL()) {
      etchContext.beginPath();
      etchContext.moveTo(etchMain.width / 2, etchMain.height / 2);
      // arrow specific drawing goes here

    }
    else {

    }
  }
}
function clearCanvas() {
  var etchMain = document.getElementById('etchMain');
  var etchContext = etchMain.getContext('2d');
  etchContext.clearRect(0, 0, etchMain.width, etchMain.height);
}

Answer 1

我对你所说的内容实现了一个非常基本的想法，只是因为它听起来很有趣。点击运行片段，然后单击 Canvas 框以赋予该框架焦点。事件处理程序将阻止窗口滚动，而是使用箭头输入来递增或递减 x 和 y 并从那里绘制，或者您可以按空格键清除 Canvas !

您缺少的设计是将x和y存储在事件处理程序之外，并使用x之前状态之间的差异> 和 y 绘制 Canvas 线:

var pos = {
  x: 50,
  y: 50,
}

var etchMain = document.getElementById('etchMain');
var etchContext = etchMain.getContext('2d');

window.addEventListener('keydown', function(e) {
  e.preventDefault();
  
  if(e.keyCode === 32) {
    clearCanvas();
  } else {

    etchContext.beginPath();
    etchContext.moveTo(pos.x, pos.y);

    switch (e.keyCode) {
      //left arrow
      case 37:
        pos.x--;
        break;
      //up arrow
      case 38:
        pos.y--;
        break;
      //right arrow
      case 39:
        pos.x++;
        break;
      //down arrow
      case 40:
        pos.y++;
        break;
      default:
        break;
      }

      etchContext.lineTo(pos.x, pos.y);
      etchContext.stroke();
    }
});

function clearCanvas() {
  etchContext.clearRect(0, 0, etchMain.width, etchMain.height);
}

#etchMain {
  border: 1px solid black;
}

<canvas id="etchMain" height="100" width="100" />