HTMLキャンバスでストロークをパスに変換する

Question

パスを描画して画面に描画せずに新しいパスに変換できるようにすることはできますか？もしそうなら、どうですか？

Answer 1

キャンバスでは、（ほぼ）すべてのシェイプが、線または塗りつぶされたパスです。キャンバスに「ストローク」という概念はありませんが、パスにstroke()を呼び出すという概念があります。

あなたは何ですか？ doは、パスを作成し、それを塗りつぶしてから、まったく同じパスを描きます。

ctx.beginPath(); 
ctx.moveTo(50,50); 
ctx.lineTo(100,100); 
ctx.lineTo(25,100); 
ctx.closePath(); 


ctx.fillStyle = 'gold' 
ctx.fill(); 

// The path is still there, lets stroke it 
ctx.lineWidth = 4; 
ctx.stroke(); 

ライブ例：

http://jsfiddle.net/9SK2C/

しかしあなたは新しいパスを開始すると、その古いパスが永遠に失われることに注意してください。パスを保存または復元する方法はありません。あなたがそれを保存/復元するためのパスを追跡したいのであれば、それをすべて自分で説明しなければなりません。

パスを編集することもできません。それを最後に追加することもできますが、SVGにあるように、パス内のポイントを修正することはありません。新しいポイントで最初からリメイクする必要があります。