HTMLリファレンスマニュアル

HTMLタグ一覧

HTML canvas clip()メソッド

clip()はCanvas 2D APIは、現在作成されたパスを現在のクリップパスに設定する方法です。

オンラインサンプル

キャンバスから切り取ります200 * 120ピクセルの矩形エリアを切り取ります。その後、赤い矩形を描画します。赤い矩形の部分のみがクリップエリア内にあります：

サンプル

<!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8">-8>
<title>HTML canvas clip()メソッドの使用-基本チュートリアル(oldtoolbag.com)</<title>
</<head>
<body>
<span>clip()を実行していません：</span>
<canvas　id="myCanvas"　width="300"　height="150"　style="border:1px　solid　#d3d3d3>
あなたのブラウザはHTMLをサポートしていません5　canvas　タグ。
</canvas>
<script>
var　c=document.getElementById("myCanvas");
var　ctx=c.getContext("2d");
//　矩形を描画します
ctx.rect(50,20,200,120);
ctx.stroke();
//　赤い矩形を描画します

150,100);
</script>　
<span>clip()を実行しました：</span>
<canvas　id="myCanvas2"　width="300"　height="150"　style="border:1px　solid　#d3d3d3>
あなたのブラウザはHTMLをサポートしていません5　canvas　タグ。</canvas>
<script>
var　c=document.getElementById("myCanvas2");
var　ctx=c.getContext("2d");
//剪切一个矩形区域
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.clip();
//カットアウト後、矩形を描画

150,100);
</script>　
</body>
</html>

テストして見て‹/›

ブラウザの互換性

IEFirefoxOperaChromeSafari

Internet Explorer 9、Firefox、Opera、ChromeおよびSafariがclip()をサポートします。メソッド。

注意：Internet Explorer 8 及びそれ以前のバージョンでは<canvas>要素をサポートしていません。

定義と使用方法

clip()メソッドは、原始キャンバスからどんな形状やサイズのエリアもカットアウトします。

ヒント：裁剪されたエリア以降のすべてのグラフィックは、その裁剪されたエリアに限定されます（キャンバス上の他のエリアにはアクセスできません）。しかし、clip()メソッドを使用する前にsave()メソッドを使用して現在のキャンバスエリアを保存し、その後の任何时候（restore()メソッドを使用して）それを復元することができます。

JavaScript 语法：	context.clip();

HTML canvas 参考マニュアル

HTML: <template> タグ