最新のWeb開発のチュートリアル
 

HTML canvas clip() Method

<HTMLキャンバスリファレンス

矩形領域のクリップ200*120のキャンバスからのピクセル。 そして、赤い四角形を描画します。 クリップされた領域の内側にある赤い四角の部分だけが表示されます:

YourbrowserdoesnotsupporttheHTML5canvastag。

JavaScriptを:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Clip a rectangular area
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.clip();
// Draw red rectangle after clip()
ctx.fillStyle="red";
ctx.fillRect(0,0,150,100);
</script>
»それを自分で試してみてください

ブラウザのサポート

表中の数字は完全に方法をサポートする最初のブラウザのバージョンを指定します。

方法
clip() はい 9.0 はい はい はい

定義と使用法

clip()メソッドクリップのオリジナルキャンバスから任意の形状と大きさの領域。

ヒント:領域がクリップされると、将来のすべての描画が切り取られた領域(キャンバス上の他の地域へのアクセスなし)に制限されます。ただし使用して、現在のキャンバス領域に保存することができますsave()使用する前に、メソッドをclip()メソッドを、そして(とそれを復元しrestore()メソッド)将来の任意の時間を。

JavaScriptシンタックス: context.clip();

<HTMLキャンバスリファレンス