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

HTML5 Canvasの保存および復元メソッドとは何ですか?


HTML5キャンバスは、キャンバスの状態を保存および復元するための2つの重要な方法を提供します。キャンバスの状態は、保存するたびにスタックに保存されます メソッドが呼び出され、復元するたびに、最後に保存された状態がスタックから返されます。 メソッドが呼び出されます。

Sr.No.
方法と説明
1
save()
このメソッドは、現在の状態をスタックにプッシュします。
2
restore()
このメソッドは、スタックの最上位の状態をポップし、コンテキストをその状態に復元します。

次のコードを実行して、Canvasのsaveメソッドとrestoreメソッドについて学習することができます。

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

            // get the canvas element using the DOM
            var canvas = document.getElementById('mycanvas');

            // Make sure we don't execute when canvas isn't supported
            if (canvas.getContext){

               // use getContext to use the canvas for drawing
               var ctx = canvas.getContext('2d');

               // draw a rectangle with default settings
               ctx.fillRect(0,0,150,150);

               // Save the default state
               ctx.save();

               // Make changes to the settings
               ctx.fillStyle = '#66FFFF'
               ctx.fillRect( 15,15,120,120);

               // Save the current state
               ctx.save();

               // Make the new changes to the settings
               ctx.fillStyle = '#993333'
               ctx.globalAlpha = 0.5;
               ctx.fillRect(30,30,90,90);

               // Restore previous state
               ctx.restore();

               // Draw a rectangle with restored settings
               ctx.fillRect(45,45,60,60);

               // Restore original state
               ctx.restore();

               // Draw a rectangle with restored settings
               ctx.fillRect(40,40,90,90);
            } else {
               alert('You need Safari or Firefox 1.5+ to see this demo.');
            }
         }
      </script>
   </head>
   <body id = "test" onload = "drawShape();">
      <canvas id = "mycanvas"></canvas>
   </body>
</html>

  1. HTML5のCanvas用の無料ライブラリとは何ですか?

    Webサイトにインタラクティブな要素を追加する必要がある場合は、Canvas用の無料のライブラリを使用すると作業が簡単になります。まず、HTML5でキャンバスを作成する方法について説明しましょう。 HTMLのタグは、スクリプトを使用してグラフィックやアニメーションなどを描画するために使用されます。 HTML5で導入されたタグ。 次のコードを実行して、HTML5でキャンバスを作成してみてください 例 <!DOCTYPE html> <html>    <head>       <title&

  2. C#のクラスメソッドとクラスメンバーの違いは何ですか?

    メンバー関数、つまりクラスのメソッドは、他の変数と同様に、クラス定義内にその定義またはプロトタイプを持つ関数です。メンバーであるクラスの任意のオブジェクトを操作し、そのオブジェクトのクラスのすべてのメンバーにアクセスできます。 以下は例です- public void setLength( double len ) {    length = len; } public void setBreadth( double bre ) {    breadth = bre; } 以下は、C#でクラスメンバー関数にアクセスする方法を示す例です- 例 usin