：lineTo()

Question

我刚接触过Javascript！

如何将变量赋给当前的xy坐标，以便使用相对位置绘制直线？试着用键盘来蚀刻素描。上下左右箭头键..。使用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

我实现了一个非常基本的想法，你在谈论什么，只是因为它听起来有点有趣。点击“运行片段”，然后单击“画布”框，以获得该帧焦点。事件处理程序将防止窗口滚动，而是使用箭头输入来增加或减少x和y，然后从那里进行绘制，或者可以按空格键清除画布！

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

​

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" />

​