HTML5 Canvas API_html5 の Clip() メソッドを使用して領域画像をトリミングするチュートリアルのヒント

Canvas を使用して画像を描画する場合、画像の一部だけを保持したいことがよくありますが、これを実現するには Canvas API の画像トリミング機能を使用します。
Canvas APIの画像トリミング機能とは、キャンバス内のパスを使用すると、パスに含まれる領域の画像のみが描画され、パスの外側の画像は描画されません。これは Flash のレイヤーマスクに似ています。

グラフィックスコンテキストのパラメータを指定せずにclip()メソッドを使用して、Canvasの画像トリミング機能を実装します。このメソッドは、パスを使用して Canvas のクリッピング領域を設定します。したがって、最初にパスを作成する必要があります。作成が完了したら、clip()メソッドを呼び出してトリミング領域を設定します。
キャンバス上でトリミングが実行されることに注意してください。トリミングされたキャンバスは元のサイズに戻すことができません。これは、キャンバスが最初に定義されたサイズのままであることを保証するためです。最終的にキャンバスで描画する場合はsave()とrestore()に注意する必要があります。描画する前に、まずキャンバスをカットします。写真である必要はありません、パスを入れることもできます~

まず簡単なデモを見てみましょう。

JavaScript コードコンテンツをクリップボードにコピーします

1.   
2. "zh">   
3.   
4.     "UTF-8">   
5.        
6.        
7.   
8.   
9. "canvas-warp">   
10.     "canvas">   
11.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
12.        

<スクリプト>

window.onload = function(){

var Canvas = document.getElementById("canvas");

Canvas.width = 800;

Canvas.height = 600;

var context = Canvas.getContext("2d"); context.fillStyle =

"#FFF"

; context.fillRect(0,0,800,600);

//画面上に大きな正方形を描画します

context.fillStyle = "黒"

;

context.fillRect(10,10,200,200); context.save();

context.beginPath();

//(0, 0) 点から (50, 50) の正方形までキャンバスを切り取ります

context.rect(0,0,50,50); context.clip();

//赤丸

context.beginPath(); context.ストロークスタイル =

"赤"

;

context.lineWidth = 5

; context.arc(100,100,100,0,Math.PI * 2,false

);

//フルサークル

context.ストローク();

context.closePath();

context.restore();

//キャンバス全体を再度カットします

context.beginPath();

context.rect(0,0,500,500); context.clip();

//カットされていない青い線を描画します

context.beginPath();

context.ストロークスタイル = "青";

context.lineWidth = 5

;

context.arc(100,100,50,0,Math.PI * 2,false);

//フルサークル

context.ストローク();

context.closePath();

};

実行結果: