clip()－Canvasリファレンス

トップページ > Canvas > clip()

★Canvasリファレンス

context . clip() …… パスで切り抜き（クリッピング）する
Internet Explorer9

clip()メソッドは、パスで切り抜き（クリッピング）する際に使用します。 clip()メソッドで切り抜き指定した領域と、その後にパスで描かれた領域の重なる部分だけが切り抜き表示されます。

切り抜き領域が算出される際には、開いているサブパスも暗黙的に閉じられて切り抜きが適用されますが、実際にサブパスが閉じられるわけではありません。

新規の切り抜き領域を指定した場合には、現在の切り抜き領域と置き換えられます。また、コンテキストを初期化すると、左上端が(0,0)で幅と高さが座標空間の範囲となる四角形が切り抜き領域として設定されます。

■非ゼロ回転数ルール

clip()メソッドでは、切り抜きの際に「非ゼロ回転数ルール」という切り抜きルールが適用されます。非ゼロ回転数ルールでは、サブパスが交差して図形同士が重なった部分も切り抜き領域となります。

以下の図は、非ゼロ回転数ルールと偶数奇数ルールの違いを示したものです。 clip()メソッドでは偶数奇数ルールを指定できるわけではありませんが、比較をすることで非ゼロ回転数ルールを理解しやすくなるのではないかと思います。

四角形や円などの単純な図形の場合には特に意識する必要はありませんが、サブパス同士が交差するような複雑な図形で切り抜く場合には、切り抜きルール次第で結果が異なるので、簡単に理解しておくと良いでしょう。

なんとなく混乱しそうなので、あえて以下のメモを付け加えます。

※メモ：fill()のページでの非ゼロ回転数ルールの解説では、星形などの図形は塗りつぶし対象の図形として説明していますが、このページでの非ゼロ回転数ルールの解説では、星形などの図形はクリップを適用する領域を表す図形として説明しています。つまり一筆書きで描いた星形図形でクリッピングすると、星形の中央部の五角形の部分も一緒に切り抜き対象となるという意味です。

このページ内の説明には、clip()メソッドによる「切り抜き」と、偶数奇数ルールにおける「サブパスが交差した場合の図形の抜け」があって紛らわしいですが、混同しないようにしてください。もし紛らわしければ、この「■非ゼロ回転数ルール」の項目ごと無視してください。必ずしも非ゼロ回転数ルールを理解する必要は無いと思います。

■clip()メソッドによる切り抜き

clip()メソッドによる切り抜きは、以下のような流れとなります。

切り抜き領域となる図形（以下の例では星形）をパスで作成する
clip()メソッドを指定することで、作成した図形が切り抜き領域となる
切り抜かれる図形（以下の例では四角形）を描く
先に指定した切り抜き領域と重なった部分だけが描画される

■使用例

HTML + JavaScriptソース

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvasで図形を描く</title>
<script type="text/javascript">
<!--
function test() {
  //描画コンテキストの取得
  var canvas = document.getElementById('sample');
  if (canvas.getContext) {
    var context = canvas.getContext('2d');
    //ここに具体的な描画内容を指定する
    //一筆書きで星形のパスを描く
    context.beginPath();
    context.moveTo(90,60);
    context.lineTo(210,60);
    context.lineTo(110,130);
    context.lineTo(150,20);
    context.lineTo(190,130);
    context.closePath();

    //上で作成した星形のパスを切り抜き領域とする
    context.clip();

    //左から110上から35の位置に幅80高さ80の塗りつぶしの四角形を描く
    context.fillRect(110,35,80,80);
  }
}
//-->
</script>
</head>
<body onLoad="test()">
<h2>Canvasで図形を描く</h2>
<canvas width="300" height="150" id="sample" style="background-color:yellow;">
図形を表示するには、canvasタグをサポートしたブラウザが必要です。
</canvas>
</body>
</html>

↓↓↓

ブラウザ上の表示

Canvasで図形を描く

■関連項目

<canvas> …… 図形を描く