Question

是否可以更改绘制到画布的线条？因此，如果用：

绘制一条线

    ctx.beginPath(); 
    ctx.lineWidth="2";
    ctx.strokeStyle="rgba(42, 155, 128, 0.9)"; 
    ctx.moveTo(linkX,linkY);
    ctx.lineTo(postX,postY);
    ctx.stroke();

然后，随着鼠标的移动，postX和postY会改变位置，路径会更新。我试图在悬停时用鼠标移动的两个点之间画一条线。

到目前为止，我已经绘制了三行，我想更新lineTo的位置，但无法选择它们。如果这只是css，那就像是：

$link.on('mousemove', function(e){
    $post.css({
        left: mouse.x,
        top: mouse.y
    });
 });

如何使用canvas元素进行此类操作？

感谢。

Answer 1

Canvas并不聪明。它不会记住你的线作为一个对象。 Whenevet你画线画布会忘记它。您需要跟踪在画布上绘制的形状（线）的坐标。然后通过清除现有线并将其重新绘制到新位置来创建线条感觉。

Answer 2

好吧，如果我将绘图部分添加为mousemove事件的一部分，它就可以了。不确定这是不是最好的方法，但是嘿嘿。

    $link.on('mousemove', function(e){
      ctx.beginPath(); 
      ctx.lineWidth="2";
      ctx.strokeStyle="rgba(42, 155, 128, 0.9)"; 
      ctx.moveTo(linkX,linkY);
      ctx.lineTo(postX,postY);
      ctx.stroke();
    });

更改画布线，或两点之间的调整线

2 个答案: