HTMLキャンバス上でのレイヤー化とアウトライン化

Question

私は一見シンプルなグラフィックに取り組んでいます。サークルを作成し、サークルを結んでいる線で、サークルに背景を塗りつぶしたいと思います。私はほとんどそれを持っているが、このワンピースは私を引き上げている。

私は、円を作成し、キャンバスを定義することができ、かつラインうまくそれらを接続する：

var canvas = document.getElementById('canvas'); 
var ctx = canvas.getContext('2d'); 
canvas.width = $(window).width(); 
canvas.height = $(window).height(); 

ctx.beginPath(); 
ctx.strokeStyle = "black"; 
ctx.lineWidth = 10; 

//Create two nodes 
ctx.arc(100, 100, 25, 0, 2*Math.PI); 
ctx.moveTo(200+25, 200) 
ctx.arc(200, 200, 25, 0, 2*Math.PI); 

//line connecting two nodes 
ctx.moveTo(100, 100); 
ctx.lineTo(200, 200); 

ctx.stroke(); 

これは次のようになります。

は、私はその後、やることはいっぱいありますイメージを持つ円（これは私がclip()を使用する理由です）が、例のために白い色の塗りつぶしを使用しても問題が示されます。

//simulate filling in nodes with image, in this case solid color 
ctx.clip(); 
ctx.fillStyle = "white"; 
ctx.fill(); 

今、私はほとんどそこだが、私は読んだことがあり、いくつかのギザギザがあると、Chromeでほんの少しの「バグ」であり、また、私は円上の太い黒のアウトラインが好き。だから、私はの2つのサークルに戻って、それらの輪郭を描きたいと思う。コンテキストは常に行の2を接続することを覚えて、私はstroke()を呼び出した後、画像の上に接続線で終わる、私は何をすべきかに関係なく、思わない：

私

//would like to just re-outline circles, not connecting line 
ctx.stokeStyle = "black"; 
ctx.arc(100, 100, 25, 0, 2*Math.PI); 
ctx.moveTo(200+25, 200) 
ctx.arc(200, 200, 25, 0, 2*Math.PI); 
ctx.stroke(); 

白い背景（画像を読み込む）で塗りつぶした後、再び2つのサークルの輪郭を描く方法は分かりませんか？

私はそれをレイヤーのように考えます。最初にいくつかの線を引いてから、イメージを入れてから、もう一度上に描画します。 htmlキャンバスがそのように使用されるのかどうかは不明です。ありがとう。

JSFiddle Example Here

Answer 1

あなたは新しいパスを開始するために忘れています。

新しいシェイプを開始するときは、必ずctx.beginPathを使用する必要があります。そうしないと、コンテキストによってすべての以前のパスが再描画されます。

ところで、ジャギーサークルは、それらを再レンダリングしているためです。エッジがジャギーになる原因になります。それだっ

var canvas = document.createElement("canvas"); 
 
var ctx = canvas.getContext('2d'); 
 
canvas.width = 500; 
 
canvas.height = 500; 
 
document.body.appendChild(canvas); 
 
ctx.setTransform(1,0,0,1,0,-50); // just moving everything up to be seen in snippet. 
 

 
ctx.beginPath(); 
 
ctx.strokeStyle = "black"; 
 
ctx.fillStyle = "#FAFAFF"; 
 
ctx.lineWidth = 10; 
 

 
//Create two nodes 
 
/* dont draw the two circle the first time as you are 
 
    doubling the render causing the edges to get to sharp 
 
    making them appear jaggy. 
 
ctx.arc(100, 100, 25, 0, 2*Math.PI); 
 
ctx.moveTo(200+25, 200) 
 
ctx.arc(200, 200, 25, 0, 2*Math.PI); 
 
*/ 
 
//line connecting two nodes 
 
ctx.moveTo(100, 100); 
 
ctx.lineTo(200, 200); 
 

 
ctx.stroke(); 
 

 
ctx.beginPath(); // start a new path and removes all the previous paths 
 

 
//Create two nodes 
 
ctx.arc(100, 100, 25, 0, 2*Math.PI); 
 
ctx.moveTo(200+25, 200) 
 
ctx.arc(200, 200, 25, 0, 2*Math.PI); 
 
ctx.fill(); 
 

 
ctx.beginPath(); // start a new path and removes all the previous paths 
 

 
//Create two nodes 
 
ctx.arc(100, 100, 25, 0, 2*Math.PI); 
 
ctx.moveTo(200+25, 200) 
 
ctx.arc(200, 200, 25, 0, 2*Math.PI); 
 
ctx.stroke();