主页 / 问题 / 575357
Accepted
Bim Bam
Asked:2020-10-09 02:00:52 +0000 UTC2020-10-09 02:00:52 +0000 UTC

Canvas - 将坐标写入数组

  • 772

这是一个画布，您可以在上面用鼠标绘制任何东西。我的任务是将绘制的线的坐标存储在一个数组中。为此，我需要一个循环。但是对于每个新动作，所有变量都会被重置并再次调用。所以在这段代码中，alert (i) - 不断显示单位“1”，当我将坐标添加到数组时，它们总是落在同一个地方，而不是累加，它们只是简单地相互替换。

如何在数组中写入我需要的坐标？ 

window.onload = function() {
  canvas = document.getElementById("drawingCanvas");
  context = canvas.getContext("2d");

  canvas.onmousedown = startDrawing;
  canvas.onmousemove = draw;
};

function startDrawing(e) {
  // Начинаем рисовать
  isDrawing = true;

  // Создаем новый путь (с текущим цветом и толщиной линии) 
  context.beginPath();

  // Нажатием левой кнопки мыши помещаем "кисть" на холст
  context.moveTo(e.pageX - canvas.offsetLeft, e.pageY - canvas.offsetTop);
};

function draw(e) {

  if (isDrawing == true) {
    var i = 0;
    // Определяем текущие координаты указателя мыши
    var x = e.pageX - canvas.offsetLeft;
    var y = e.pageY - canvas.offsetTop;

    // Рисуем линию до новой координаты
    context.lineTo(x, y);
    context.stroke();


    var coord_arr = [];
    coord_arr.splice(i, 0, {
      x: x,
      y: y
    });


    i++;
    alert(i)
  }


};
javascript

1 个回答

  1. Best Answer

    您不需要保存线坐标，您需要保存光标坐标并从中绘制线。 

    document.addEventListener( 'mousedown', document_mousedownHandler );

const path = { coords: null };

function document_mousedownHandler( event ){
  path.coords = [];


  document.removeEventListener( 'mousedown', document_mousedownHandler );

  document.addEventListener( 'mouseup', document_mouseupHandler );
  document.addEventListener( 'mousemove', document_mousemoveHandler );
}
function document_mouseupHandler( event ){
  path.coords = null;


  document.removeEventListener( 'mouseup', document_mouseupHandler );
  document.removeEventListener( 'mousemove', document_mousemoveHandler );
  document.addEventListener( 'mousedown', document_mousedownHandler );
}
function document_mousemoveHandler( event ){
  path.coords.push( { x: event.clientX, y: event.clientY } );
}

    剩下的就是调用该方法render并在循环中沿坐标绘制。

    • 2

相关问题