HTML5キャンバス私は次のコードsnipper持つ複雑な形状に

Question

を入力します。私は土星のリングの一種であるアウトラインにもかかわらず、この形状を埋める

 context.beginPath(); 
     context.moveTo(284 + xoff, 119 + yoff); 
     context.bezierCurveTo(46 + xoff, 189 + yoff, 39 + xoff, 60 + yoff, 243 + xoff, 29 + yoff); 
     context.moveTo(284 + xoff, 119 + yoff); 
     context.bezierCurveTo(239 + xoff, 130 + yoff, 104 + xoff, 105 + yoff, 243 + xoff, 29 + yoff); 

     context.strokeStyle = "#e2252c"; // line color 
     context.stroke(); 
     context.closePath(); 

毎回、塗りが半分の楕円形のようにそれを埋めるように見えます、私が設定した線の間を塗りつぶすしかない方法があります。私はクリッピングを試みたが、これは今まで働かなかった。何か不足していますか？

Answer 1

ここで問題となるのは、あなたが飛び回っていることです。 Etch-a-Sketchを使って作業するようなあなたのパスを作成することを考えてみましょう。 1つの線を描画してから、別の点にジャンプして別の線を描画することはできません。代わりに1つを描いてから、停止したところから続行する必要があります。これを機能させるためには、次の操作を実行する必要があります：バックあなたがのmoveToをした時点までとは反対側の終点まで

1. にbeginPath
2. のmoveTo
3. 最初の行のためのベジェ曲線
4. ベジェ曲線
6. ストローク
に次のために働い

を埋めます私のこと（私の2番目のカーブはあなたのニーズを満たすために微調整する必要があります）：

context.beginPath(); 
context.moveTo(284 + xoff, 119 + yoff); 
context.bezierCurveTo(46 + xoff, 189 + yoff, 39 + xoff, 60 + yoff, 243 + xoff, 29 + yoff); 
context.bezierCurveTo(46 + xoff, 189 + yoff, 39 + xoff, 60 + yoff, 284 + xoff, 119 + yoff); 
context.closePath(); 
context.strokeStyle = "#e2252c"; // line color 
context.fillStyle = "#2C6BA1"; 
context.stroke(); 
context.fill();