HTML Canvasは循環的に消去され、完全に消去されませんか？

Question

だから、私は私の円を描く：https://i.imgur.com/qhrDSyr.png

ドープ：

var homeimg = document.createElement("img"); 
homeimg.src = "img/nav/home-inactive.png"; 
var homec = document.getElementById("home-canvas"); 
var homectx = homec.getContext("2d"); 
homectx.beginPath(); 
homectx.arc(85, 85, 85, 0, 2 * Math.PI); 
homectx.closePath(); 
homectx.shadowColor = "rgba(0, 0, 0, 0.3)"; 
homectx.shadowOffsetX = 2; 
homectx.shadowOffsetY = 2; 
homectx.shadowBlur = 3; 
homectx.drawImage(homeimg, 0, 0, 170, 170); 
homectx.beginPath(); 
homectx.arc(0, 0, 85, 0, 2 * Math.PI, true); 
homectx.clip(); 
homectx.closePath(); 
homectx.restore(); 

は、我々はこれを取得します。今私はキャンバスをクリアしたい - それを完全にきれいに拭く。

homectx.clearRect(0, 0, homec.width, homec.height); 

これは、左上隅のうち、円形チャンクを取りますhttps://i.imgur.com/uqJ4rA9.png

さて、大したことありません。 homecの幅と高さは両方とも180pxです（変更されたことはありません）ので、円の形を0、0からクリアしていれば、私はちょうどバンプします。

homectx.clearRect(0, 0, 600, 600); 

同じサイズのチャンクが消えます。

私はここで間違っていますか？これをどうやってクリアするのですか？

Answer 1

@apemom、 コードhomectx.clip()はここでの犯人です。私が何を参照しているかをよりよく理解するために、canvas.clip（）がどのように機能するかについてのこのドキュメントをお読みください。

http://www.w3schools.com/tags/canvas_clip.asp

引用： クリップ（）メソッドクリップ元のキャンバスから任意の形状と大きさの領域。

ヒント：領域がクリップされると、今後の描画はすべて切り抜かれた領域に制限されます（キャンバス上の他の領域へのアクセスはありません）。ただし、クリップ（）メソッドを使用する前にsave（）メソッドを使用して現在のキャンバス領域を保存し、将来の任意の時点で（restore（）メソッドを使用して）復元することができます。

幸運！