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

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

这是我目前的标准贝塞尔行程代码：

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，所以这是一个可用的资源。

来源

2012-03-15 sadmicrowave

无需重绘整个笔划。

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

库像拉斐尔

为了记录在案，拉斐尔使用SVG，不HTML5 Canvas和SVG让这样的事情要容易得多，因为它是一个保留拉丝表面。

画布是一个即时绘图表面。只要你画一些东西（比如曲线），画布就不知道画的是什么或者它在哪里。你必须自己跟踪的一切。我觉得我鹦鹉很多，但我写了一个简单的教程，学习保留必要的信息，使画布像SVG一样持久，可以找到here。这就是说，如果您的计划应用/网站不会非常复杂或密集，那么使用SVG（而不是Canvas）可能会更好。

来源

2012-03-15 19:40:56

我可以在我的文档主体上创建一个SVG“画布类型”叠加层，当我不再需要它时，它可以被销毁吗？理想情况下，我的曲线笔画将放置在某些元素的顶部，直到用户关闭视图然后它将消失，在这种情况下，我想销毁svg容器。 – sadmicrowave 2012-03-15 19:47:42

是的，所有SVG元素都像页面上的常规DOM元素，您可以创建/销毁/显示/隐藏和定位。看看这些例子：http://www.w3schools.com/svg/svg_examples.asp – 2012-03-15 19:52:50

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

回答

相关问题