キャンバスでカスタムシェイプを塗りつぶす方法は？

Question

私はカスタムシェイプを描こうとしますが、私はmoveTo ..を使用していますので、私はそれを埋めることができませんので、私の質問は何か方法があります形状を満たすために画面上のポイントを決定することができますか？私に

青の色で画像を埋めることができますまたはI最も使用または層と同じブロックに別の実形状を描いた...私の例で

ルックがここに単純な形状を描いたためには、それを行うにしますImは塗りつぶしの四角形を描きました。本当の意味ですか？前のための形状のため

コードを記入：塗りつぶし後の形状のため

var canvas3 = document.getElementById('canvas3'); 
     var c3 = canvas3.getContext('2d'); 
     c3.fillStyle = 'green'; 
     c3.beginPath(); 
     c3.moveTo(10,30); 
     c3.lineTo(200,30); 
     c3.moveTo(10,80); 
     c3.lineTo(200,80); 
     c3.moveTo(10,30); 
     c3.lineTo(10,180); 
     c3.moveTo(200,30); 
     c3.lineTo(200,180); 
     //c3.closePath(); 
     c3.fill(); 
     c3.lineWidth = 5; 
     c3.strokeStyle = 'orange'; 
     c3.stroke(); 

コード：

私はこのような形状を描いたことができますするための最良の方法です

var canvas3 = document.getElementById('canvas3'); 
     var c3 = canvas3.getContext('2d'); 
     c3.fillStyle = 'blue'; 
     c3.beginPath(); 
     c3.moveTo(10,30); 
     c3.fillRect(10,30,190,60); 
     c3.moveTo(10,30); 
     c3.lineTo(10,180); 
     c3.moveTo(10,90); 
     c3.lineTo(200,90); 
     c3.moveTo(200,30); 
     c3.lineTo(200,180); 
     c3.moveTo(10,30); 
     c3.lineTo(200,30); 
     //c3.closePath(); 
     c3.fill(); 
     c3.lineWidth = 5; 
     c3.strokeStyle = 'orange'; 
     c3.stroke(); 

、最終的には？ 注：新しいhtml5キャンバスに私はthis online bookから読んだ。

Answer 1

形状が記入する画面上の点は決まっている可能性があります 形ですか？それを行うには、私は同じレイヤー内で同じブロックを使用したり、別のリアルな形を描いたりしました

ちょうど同じ場所に形を描きます。最初に入力し、その後にストロークします。キャンバスでは、物を描くためには少しの計画が必要です。

は、頻繁に再描画したり移動したりする場合に、幾何学的データを保持するオブジェクトを定義します。これは後で目的を単純化するでしょう。

これは私がこのような形を描くための最良の方法ですか？

私の意見では、このコードははるかに簡単でコードの行数を減らすことができます。単純な方法で形状を描くことができれば、そのコードのようにいくつかの部分で形状を分割する必要はありません。この場合、4つの線を1つの長方形に置き換えることができます。

これらの図形が内部的にどのように描かれているかを知ることは、rect()の葉を利用できるようにするのにも役立ちます。つまり、左上隅を閉じることができます。例えば

：

var c3 = c.getContext("2d"); 
 

 
// fill blue box first as it will be at the bottom 
 
c3.rect(10, 30, 190, 50); // x, y, width, height 
 
c3.fillStyle = 'blue'; 
 
c3.fill(); 
 

 
// orange stroke 
 
// we know rect() will close at upper-left corner so continue from there with left leg 
 
c3.lineTo(10, 180); 
 
c3.moveTo(200, 80);  // create second leg at right separately 
 
c3.lineTo(200, 180); 
 

 
c3.strokeStyle = "orange"; 
 
c3.lineWidth = 5; 
 
c3.lineJoin = c3.lineCap = "round"; 
 
c3.stroke();

<canvas id=c height=180></canvas>

別のアプローチは、線路を構築し、次に充填するであろう：

var c3 = c.getContext("2d"); 
 

 
c3.fillStyle = 'blue'; 
 
c3.fillRect(10, 30, 190, 50); // fillRect does not add to path 
 

 
// orange stroke 
 
c3.moveTo(10, 180);   // create "housing" starting at bottom-left corner 
 
c3.lineTo(10, 30);   // upper-left 
 
c3.lineTo(200, 30);   // upper-right 
 
c3.lineTo(200, 180);   // bottom-right 
 

 
c3.moveTo(10, 80);   // add cross-bar 
 
c3.lineTo(200, 80); 
 

 
c3.strokeStyle = "orange"; 
 
c3.lineWidth = 5; 
 
c3.lineJoin = c3.lineCap = "round"; 
 
c3.stroke();

<canvas id=c height=180></canvas>