javascript - 用鼠标在 Canvas 上绘制固定边的多边形

Question

我正在尝试使用鼠标单击和移动事件在 Canvas 上绘制多边形(比如说 4 边)。

1. 在 Canvas 上单击 moveTo(这一点)。
2. 现在将光标移动 lineTo(当前点)但不是中间点。线条应随 mousemove 保持移动，并且应仅在单击后绘制到 Canvas 上。

3. 第四次点击(或任何 x 次)后，多边形应该关​​闭路径()；

   var pressed = false;

   function myfunc1(e){
       context.beginPath();
       context.arc(e.clientX, e.clientY, radius, 0, Math.PI*2);
       context.fill();
       context.beginPath();
       context.moveTo(e.clientX,e.clientY);
       pressed = true; 
   }
   
   function myfunc2(e){    
       if(pressed ===true){    
       context.lineTo(e.clientX,e.clientY);
       context.stroke();    
       }
   }    
   canvas.addEventListener('click',myfunc1);
   canvas.addEventListener('mousemove',myfunc2);
   

我写了这个，但是我不想要中间的行

Answer 1

你需要的是一个堆栈。不要想着画线。考虑将所有点击点存储在一个数组中。单击 4 次后，绘制多边形(假设这就是您想要的)。像这样:

var stack = [];

myfunc1(e){

    stack.push(e.clientX, e.clientY);

    if(stack.length == 4)
        actuallyDraw();
}

var actuallyDraw(){
    //take the 4 points in stack and draw the polygon

    //clearing the stack for the next polygon
    stack.length = 0; 
}

canvas.addEventListener('click', myfunc1);