javascript canvas2dのクリッピングにパスが必要なのはなぜですか？

Question

私はしばらくの間このバグの上に私の髪を引っ張っていた。キャンバスの3つのセクションにイメージをレンダリングし、オーバーラップさせないようにしたかったのです。基本的には、画像を分離した状態に保つためにcanvas.getContext('2d').clip()を使いたかったのです。ただし、画像を描画した後にcanvas.getContext('2d').beginPath()に電話をかけるとクリップが機能します。

だから、これは（何のクリップが適用されていない）動作しません。

this.draw=function(image, cx, cy, width, height, clip){ 
     var ctx = this.canvas.getContext('2d'); 
     ctx.save(); 
     ctx.rect(clip.x, clip.y, clip.width, clip.height); 
     ctx.clip(); 
     ctx.fillStyle = "black"; 
     ctx.fillRect(clip.x, clip.y, clip.width, clip.height); 
     ctx.drawImage(image,cx-width/2,cy-height/2,width,height); 
     ctx.restore(); 
     return this; 
    }; 

しかし、この処理が行われます。

this.draw=function(image, cx, cy, width, height, clip){ 
     var ctx = this.canvas.getContext('2d'); 
     ctx.save(); 
     ctx.rect(clip.x, clip.y, clip.width, clip.height); 
     ctx.clip(); 
     ctx.fillStyle = "black"; 
     ctx.fillRect(clip.x, clip.y, clip.width, clip.height); 
     ctx.drawImage(image,cx-width/2, cy-height/2,width,height); 
     ctx.beginPath();// <------WITCHCRAFT 
     ctx.restore(); 
     return this; 
    }; 

それは私がbeginPath()は、問題を修正することを発見し、総事故だった、と私理由は分かりません。誰も私にこれを説明することはできますか？

Answer 1

クリッピングにパスが必要なので、おそらくあなたはドキュメントでそれを逃したでしょう。ここではMDNのドキュメントが言うことだ：

キャンバスの2D APIのCanvasRenderingContext2D.clip（）メソッドは、現在、現在のクリッピングパスに組み込まれているパスになります。

（強調鉱山）

それはパスが必要理由マスクをクリッピングするピカチュウの輪郭に円の長方形から任意の形状とすることができるからです。完全を期すために

---

、ここでのW3C仕様は.clip()について言っているのです：

https://www.w3.org/TR/2dcontext/#drawing-paths-to-the-canvas

コンテキスト。 clip（） クリッピング領域を現在のパスにさらに制限します。