Question

我想将bezier曲线的端点设置为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();

有没有人有任何想法如何在不使用拉斐尔这样的图书馆的情况下实现这一目标;但是，我使用的是jQuery，因此这是一个可用的资源。

Answer 1

没有重绘整个笔画。

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

像拉斐尔这样的图书馆

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

Canvas是一个直接的绘图表面。一旦绘制了某些东西（如曲线），画布就不知道绘制的内容或位置。您必须自己跟踪所有内容。我觉得我鹦鹉学舌很多，但是我写了一个简单的教程，学习如何保留必要的信息，使画布感觉像SVG一样持久here。

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

html5画布动画bezier曲线端点

1 个答案: