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

誰もが、これはラファエルのようなライブラリを使用することなく達成することができる方法を任意のアイデアを持っています。しかし、私はjQueryを使用していますので、これは利用可能なリソースです。

Answer 1

ストローク全体を再描画しません。

これはできません。 HTML5 Canvasでアニメーションを作成する方法は、HTML5 Canvasを再描画することです。レコードのラファエル

よう

ライブラリは、ラファエルはSVGではなく、HTML5キャンバスを使用し、それが保持描画面であるため、SVGは、この種のものがはるかに容易になります。

キャンバスは、即時描画面です。あなたが何か（曲線のような）を描くとすぐに、キャンバスには何が描かれたのか、それがどこにあるのか分かりません。あなたはすべてをあなた自身を追跡する必要があります。私はこれをたくさんのように感じますが、キャンバスをSVGのように永続的に感じさせるために必要な情報を保持することを学ぶ簡単なチュートリアルを書いています。hereです。

これは、計画されているアプリ/サイトが非常に複雑で集中的ではない場合、SVG（キャンバスではない）を使用する方がよいかもしれないと言われています。