Canvas clearRect() を使用して領域を消去する方法

概要: このチュートリアルでは、clearRect() メソッドを使用してキャンバスの領域を消去する方法を学びます。

Canvas clearRect() メソッドの紹介

clearRect() は、2D 描画コンテキストのメソッドです。clearRect() メソッドは、その領域を透明にすることでキャンバスの領域をクリアします。

実際には、図形を描画してから clearRect() メソッドを使用して特定の領域をクリアすることで、興味深い効果を作り出します。

以下に、clearRect() メソッドの構文を示します。

ctx.clearRect(x, y, width, height);Code language: CSS (css)

clearRect() には、消去する領域を定義する4つのパラメーターがあります。

x は、長方形の始点の x 座標です。
y は、長方形の始点の y 座標です。
width は、長方形の幅です。幅の符号によって長方形の方向が決まります。正の値は始点の右側に、負の値は始点の左側に位置します。
height は、長方形の高さです。正の値と負の値の両方を許容します。正の値は始点の下側に、負の値は始点の上側に位置します。

canvas clearRect() メソッドの例

以下に、キャンバス要素を含む index.html を示します。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Canvas clearRect</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>

    <h1>JavaScript clearRect() Demo</h1>

    <canvas id="canvas" height="400" width="500">
    </canvas>

    <script src="js/app.js"></script>

</body>
</html>Code language: HTML, XML (xml)

app.js ファイルで、キャンバスに描画する draw() を定義します。

function draw() {
    const canvas = document.querySelector('#canvas');

    if (!canvas.getContext) {
        return;
    }

    const ctx = canvas.getContext('2d');

    // draw two squares
    ctx.fillStyle = '#F9DC5C';
    ctx.fillRect(50, 50, 150, 150);

    ctx.fillStyle = 'rgba(0,0,255,0.5)';
    ctx.fillRect(100, 100, 150, 150);

    // clear the intersection
    ctx.clearRect(100, 100, 100, 100);

}

draw();Code language: JavaScript (javascript)

次の図は出力結果を示しています。

そして、ここにclearRect() のデモがあります。

動作方法

まず、document.querySelector() メソッドを使用してキャンバス要素を選択します。
次に、ブラウザがキャンバスAPIをサポートしているかどうかを確認します。
次に、キャンバスへの描画のための2D描画コンテキストを取得します。
次に、fillRect() メソッドを使用して、2つの交差する正方形を描画します。2番目の正方形はアルファ透過性を持ちます。
最後に、clearRect() メソッドを使用して、2つの正方形の交点をクリアします。

まとめ

clearRect() メソッドを使用して、キャンバス上の長方形領域のピクセルを透明な黒に設定します。

このチュートリアルは役に立ちましたか？