（HTML5キャンバス/ Javascriptの）

Question

私はこれが赤で埋め両方のアークを生成し、私がいることを伝えることができます異なる色

 //-------------- draw 
     ctx.beginPath(); 
     ctx.fillStyle = "black"; 
     ctx.arc(30, 30, 20, 0, Math.PI*2, true); 
     ctx.fill(); 
     ctx.fillStyle = "red"; 
     ctx.arc(100, 100, 40, 0, Math.PI*2, true); 
     ctx.fill(); 
     ctx.closePath(); 

で満たされた複数の円弧を描くようにしようとしている

小さなものの周りには薄い黒い輪郭があります。

誰もが、私はこれを達成することができますどのようにいくつかの光を当てることができますか？私は間違っているの？

Answer 1

パスを閉じてから再度開きます。

ctx.closePath(); 
ctx.beginPath(); 

jsFiddle。

...円弧描画コード間。

Answer 2

パスがにbeginPathで始まりendPathで終わります。 間にあるものはすべて同じパスです。ウィングルールを使用して穴が空いているパスを描画することもできます。ある方向に何かを描画し、反対方向には最初のものの中に描画します。 線を使って真ん中に穴がある四角形を描きましょう。 beginPath（）; moveTo（10,10）; lineTo（100,10）; のlineTo（（100,60）; のlineTo（10,60）; のlineTo（10,10）; closePath（）; のmoveTo（20,20）; のlineTo（20,50）; のlineTo（90 、50）; のlineTo（90,20）; のlineTo（20,20）; closePath（）; endPath（）; 塗りつぶし（）;

あなたはどのような形状でこれを行う弧を試みることができる

。一方の方向にもう一方の方向にもう一方の方向にもう一度小さな半径を使用してください