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

【问题标题】：Changing Canvas Lines, or, An Adjusting Line Between Two Points更改画布线或两点之间的调整线
【发布时间】：2014-11-22 11:38:17
【问题描述】：

是否可以更改画在画布上的线条？所以，如果画一条线：

    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
    });
 });

我怎样才能用画布元素做这种事情？

谢谢。

【问题讨论】：

标签： javascript css html canvas

【解决方案1】：

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

【讨论】：

Naeem 是什么意思？我将无法清除画布并在 mousemove 上再次绘制一条线，因为它会不断发生，那将是超级密集的，不是吗？你会以不同的方式处理这个问题吗？干杯。
在进一步的检查/测试中，不知何故，它似乎正在解决:)

【解决方案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();
    });

【讨论】：