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畫布動畫貝塞爾曲線端點

回答

相關問題