JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

HTML5 Canvasの状態を保存・復元するsave()とrestore()メソッドの使い方

HTML5 Canvasには、キャンバスの描画状態を保存・復元するために欠かせない2つのメソッド、save()とrestore()が用意されています。save()メソッドを呼び出すたびに、その時点のキャンバスの状態がスタックに積まれていき、restore()メソッドを呼び出すと、スタックの一番上に保存されていた直近の状態が取りり出されます。

この仕組みを利用することで、塗りつぶし色や透明度などの設定を一時的に変更した後、元の設定へ簡単に戻すことができます。

save()とrestore()の概要

番号メソッドと説明
1save()
現在のキャンバスの状態をスタックにプッシュ（保存）します。
2restore()
スタックの先頭にある状態をポップ（取りり出し）、コンテキストをその状態へ復元します。

サンプルコード

以下のコードを実行すると、Canvasにおけるsave()とrestore()メソッドの動作を実際に確認できます。

<!DOCTYPE HTML>
<html>
    <head>
        <style>
            #test {
                width: 100px;
                height:100px;
                margin: 0px auto;
            }
        </style>
        <script>
            function drawShape(){

                // DOMを使ってcanvas要素を取得
                var canvas = document.getElementById('mycanvas');

                // canvasがサポートされていない場合は実行しない
                if (canvas.getContext){

                    // getContextで2D描画コンテキストを取得
                    var ctx = canvas.getContext('2d');

                    // デフォルト設定で矩形を描画
                    ctx.fillRect(0,0,150,150);

                    // デフォルトの状態を保存
                    ctx.save();

                    // 設定を変更
                    ctx.fillStyle = '#66FFFF'
                    ctx.fillRect( 15,15,120,120);

                    // 現在の状態を保存
                    ctx.save();

                    // 新しい設定に変更
                    ctx.fillStyle = '#993333'
                    ctx.globalAlpha = 0.5;
                    ctx.fillRect(30,30,90,90);

                    // 直前の状態を復元
                    ctx.restore();

                    // 復元した設定で矩形を描画
                    ctx.fillRect(45,45,60,60);

                    // 元の状態を復元
                    ctx.restore();

                    // 復元した設定で矩形を描画
                    ctx.fillRect(40,40,90,90);
                } else {
                    alert('このデモを見るにはSafariまたはFirefox 1.5以降が必要です。');
                }
            }
        </script>
    </head>
    <body id = "test" onload = "drawShape();">
        <canvas id = "mycanvas"></canvas>
    </body>
</html>

コードのポイント

このサンプルでは、まずデフォルトの状態で黒い矩形を描画した後にsave()で状態を保存しています。その後、fillStyleやglobalAlphaを変更して複数の矩形を描画します。各段階でrestore()を呼び出すことで、直前に保存していた色や透明度の設定へ戻り、異なるスタイルの矩形を重ねて描画できることが確認できます。

  1. HTML5のCanvasで使える無料ライブラリとは？おすすめ3選をわかりやすく解説

    Webサイトにインタラクティブな要素を追加したいなら、Canvas用の無料ライブラリを活用することで開発作業を大幅に効率化できます。まずは、HTML5でキャンバスを作成する基本方法から見ていきましょう。HTML5のcanvasタグの基本HTMLの<canvas>タグは、JavaScriptなどのスクリプトを使ってグラフィックやアニメーションを描画するために使用される要素です。このタグはHTML5で新たに導入されました。以下のコードを実行すると、HTML5でキャンバスを作成できます。サンプルコード<!DOCTYPE html> <html>   &n

  2. C#入門：クラスメソッドとメンバー変数（クラスメンバー）の違いをわかりやすく解説

    C#のようなオブジェクト指向言語では、クラスを構成する要素として「メソッド（メンバー関数）」と「メンバー変数（フィールド）」があります。この2つは役割がまったく異なり、それぞれを正しく理解することが、カプセル化を活かした良質なコード設計への第一歩となります。本記事では、両者の違いを具体的なサンプルコードとともにわかりやすく解説します。 クラスメソッド（メンバー関数）とは？ クラスのメンバー関数、すなわちメソッドとは、その定義やプロトタイプがクラス定義の中に記述される関数のことです。他の変数と同じようにクラス内で宣言され、そのクラスのオブジェクトに対して操作を行います。 メソッドの大きな特徴は、