Question

当用户单击画布时，光标的坐标设置为等于画布上线条的起点。然后，当用户再次单击时，将为该线的终点设置新的坐标，并显示该线。我的问题是该功能只能使用一次。用户可以创建一行，仅此而已。我是画布的新手，通常我会做类似的事情：每次单击目标元素以使代码可重用时，document.createElement('div');就会执行。但是在画布上我无法做到这一点。

我尝试使用为画布形状创建document.createElement，但这仅适用于HTML元素，而不适用于javascript画布函数。我也尝试过使用if和语句来操纵当前函数，但这并没有成功。这是代码：

canvas[0].addEventListener('mousedown', setPosition);
const xCoord = [];      
const yCoord = [];  
function setPosition(position) {
    let z = -1; 
    let posX = position.clientX; 
    let posY = position.clientY;
    xCoord.push(posX);
    yCoord.push(posY);  
    z++;
    draw.moveTo(xCoord[z], yCoord[z]);
    z++;
    draw.lineTo(xCoord[z], yCoord[z]);
    draw.stroke();  
}

如您所见，该代码仅创建一行，而在那之后不再起作用，因为它已被执行。我想要的是创建诸如draw.moveTo和draw.lineTo之类的javascript函数或类似效果的代码，或者可能是另一种解决方案。

Answer 1

解决了。

事实证明，该代码正在执行多次，只是没有以这种方式出现，因为该行不断在同一位置绘制。当它开始变得稍暗时，我注意到了这一点。

真正的问题是，每次单击画布时，都需要更改数组的索引。然后，这将改变位置并产生类似笔的效果。由于数组包含鼠标的坐标并且每次单击都会更新，因此将索引设置为等于该值最有意义。

我是通过将xCoord[xCoord.length - 2]设置为起点，将xCoord[xCoord.length - 1]设置为终点来实现的。这将确保我获得被推到该数组上的鼠标光标的更新的开始和结束坐标。

然后，我做了if语句，以确保在调用它们之前将值压入数组。

canvas[0].addEventListener('mousedown', setPosition);
const xCoord = [];      
const yCoord = [];  
let z= 0;
function setPosition (position){
    z++;
    let posX = position.clientX; 
    let posY = position.clientY;
    xCoord.push(posX);
    yCoord.push(posY);  
    if (z >= 1) {
        draw.moveTo(xCoord[xCoord.length - 2], yCoord[yCoord.length - 2]);
        draw.lineTo(xCoord[xCoord.length - 1], yCoord[yCoord.length - 1]);
        draw.stroke();
    }
}

现在我可以使这个美丽... Drawing

如何通过重用相同的功能在画布上动态绘制？

1 个答案: