Canvas を使用して画像を描画する場合、画像の一部だけを保持したいことがよくありますが、これを実現するには Canvas API の画像トリミング機能を使用します。
Canvas APIの画像トリミング機能とは、キャンバス内のパスを使用すると、パスに含まれる領域の画像のみが描画され、パスの外側の画像は描画されません。これは Flash のレイヤーマスクに似ています。
グラフィックスコンテキストのパラメータを指定せずにclip()メソッドを使用して、Canvasの画像トリミング機能を実装します。このメソッドは、パスを使用して Canvas のクリッピング領域を設定します。したがって、最初にパスを作成する必要があります。作成が完了したら、clip()メソッドを呼び出してトリミング領域を設定します。
キャンバス上でトリミングが実行されることに注意してください。トリミングされたキャンバスは元のサイズに戻すことができません。これは、キャンバスが最初に定義されたサイズのままであることを保証するためです。最終的にキャンバスで描画する場合はsave()とrestore()に注意する必要があります。描画する前に、まずキャンバスをカットします。写真である必要はありません、パスを入れることもできます~
まず簡単なデモを見てみましょう。
JavaScript コードコンテンツをクリップボードにコピーします
-
-
"zh">
-
-
"UTF-8">
-
裁剪区域
-
-
-
-
"canvas-warp">
-
-
你的浏览器居然不支持Canvas？！赶快换一个吧！！
-
-
-
-
<スクリプト>
-
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.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(); -
}; -
-
-
-
実行結果:
save() メソッドとrestore() メソッドを組み合わせて使用すると、描画領域を制限できます。まず、rect() メソッドを使用して描画したい領域を囲み、次に Clip() メソッドを使用して領域をトリミングします。
このように、コンテキスト内でどのような操作を行っても、限られた部分のみが表示されます。つまり、clip()の機能は表示する領域を制限することです。領域を制限したくない場合は、restore() メソッドを使用して元のコンテキストから飛び出し、操作を続行できます。
この切り抜きをもう一度見てください:
JavaScript コード
コンテンツをクリップボードにコピーします
-
関数drawScreen() {
-
var x = Canvas.width / 2;
-
var y = Canvas.height / 2;
var-
半径 = 75;
var-
オフセット = 50
-
//トリミングされた領域は (x, y)、中心半径 75 の円です -
context.save();
-
context.beginPath();
- context.arc(x, y, radius, 0, 2 * Math.PI,
false-
);
context.clip();
-
- // まず青い円弧を描きます、切り抜きを越えた部分は表示されません
-
context.arc(x - オフセット, y - オフセット, 半径, 0, 2 * Math.PI, - false
);
-
context.fillStyle = '青';
context.fill(); -
- //黄色の円弧を描き、切り抜きを越えた部分は表示されません
-
context.beginPath(); -
false
);
- context.fillStyle =
' yellow'-
;
context.fill();
-
// 赤い円弧を描き、切り抜きを越えた部分は表示されません
-
context.beginPath(); -
context.arc(x, y オフセット, 半径, 0, 2 * Math.PI, -
false context.fillStyle =
'red'- ;
context.fill(); -
-
/*
*restore() メソッドはコンテキストの元の状態、この場合は Clip() 前の状態に戻ります。
-
- * context.beginPath() メソッドを削除して、何が起こるかを試すことができます。
-
-
context.restore();
-
context.beginPath();
-
context.arc(x, y, radius, 0, 2 * Math.PI, false);
context.lineWidth = 10;
- context.strokeStyle =
'biru'-
;
context.stroke();
} -
-
Saya menekankan sekali lagi bahawa bentuk panggilan umum fungsi pemangkasan ialah
save();
clip();
restore();
dipanggil dalam susunan ini.
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
