html5画布动画贝塞尔曲线端点

Question

我想将贝塞尔曲线的端点动画到 html5 画布中的 x,y 坐标，而不重绘整个笔划。基本上，我需要让端点看起来像是可拖动的，并且在拖动时会影响线的长度。

这是我目前的标准贝塞尔笔画代码：

   var canvas = document.getElementById("myCanvas"),
       context = canvas.getContext("2d"),
       controlX1 = 140,
       controlY1 = 10,
       controlX2 = 388,
       controlY2 = 10,
       endX = 388,
       endY = 170;

   context.moveTo(188, 130);
   context.bezierCurveTo(controlX1, controlY1, controlX2, 
   controlY2, endX, endY);
   context.lineWidth = 10;
   context.strokeStyle = "black";
   context.stroke();

有没有人知道如何在不使用像 Raphael 这样的库的情况下实现这一点？但是，我使用的是 jQuery，所以这是一个可用的资源。

Answer 1

不重绘整个笔画。

这是不可能的。在 HTML5 Canvas 中制作动画的方式是（清除和）重绘它们。

像拉斐尔一样的图书馆

为了记录，Raphael 使用的是 SVG，而不是 HTML5 Canvas，而 SVG 使这种事情变得更容易，因为它是一个保留的绘图表面。

Canvas 是一个直接的绘图表面。一旦你画了一些东西（比如曲线），画布就不知道画了什么或者它在哪里。您必须自己跟踪一切。我觉得我经常鹦鹉学舌，但我写了一个简单的教程，学习如何保留必要的信息以使画布像 SVG 一样持久，可以在 here 找到。

话虽如此，如果您计划的应用程序/网站不会非常复杂或密集，那么使用 SVG（而不是 Canvas）可能会更好。