【オリジナル】【HTML】【学習】Canvas学習ノート【中】_html/css_WEB-ITnose

5. Canvas の状態の保存と復元

        context.save();

        context.restore();

Save は現在の状態を一時的にヒープに保存でき、Restore はヒープに保存されている状態を読み取ることができます

パラメーターは必要ありません

すでにグラフがある場合は、必ず save を使用して現在の状態を保存してください。 6.1. 座標空間

キャンバスでは、座標空間はデフォルトでCanvas 左上隅を(0,0)を原点とし、X軸は水平右を正の方向、角度は0

Y軸は正の角度で垂直下向き π/2 ,

グラフィックスを描画するとき、translate() を使用できます。このメソッドは座標空間を移動します。

trantslate() は、trantslate(100,100) など、原点オフセット量を表す 2 つのパラメーターを受け取ります。

描画参照点を 100px オフセットします。それぞれ右と下に移動します

バッチ描画で座標空間を移動します グラフィックスに非常に便利です

        <canvas id="cyclePrint" style="border:1px solid" height="300px"         width="800px">你的浏览器不支持canvas</canvas>        <script>        function drawH(hoop,fillStyle,height){	        hoop.fillStyle = fillStyle;	        hoop.fillRect(0,0,50,height);        }        function draw(){	    var oHoop = document.getElementById("cyclePrint").getContext("2d");		    for(var i = 0; i < 15; i++)	    {		oHoop.save();		oHoop.translate(50*i,280-20*i);				drawH(oHoop,"rgb("+(10*i)+","+(255-10*i)+",255",20+20*i);		oHoop.restore();	    }        }        window.onload = function (){	    draw();        }        </script>

上記のコードを実行すると、異なるサイズと色のグラデーションのいくつかの四角形がキャンバス上に描画されます:

コードの説明:

ここでは、draw() という 2 つの関数が確立されています。 この関数は、ループを使用してグラフィックスを連続的に描画します

同時に、描画に必要なパラメータが別の関数drawH() に渡され、drawH() 関数によって描画が完了します四角形の描画

draw() 関数のループ本体では、drawH 関数が呼び出されるたびに、save()、restore()、および

teantslate() の再配置を実行する必要があります

6.2座標空間の回転

コンテキスト（角度）; x 軸は次のグラフィックスを取得できます:

7. グラフィックスを拡大縮小する

scale() メソッドを使用して、Canvans コンテキスト オブジェクト内のピクセル数を増減して、サイズやサイズを調整します。グラフィックスまたはビットマップのスケーリング

context.scale(x,y)

x は水平軸のスケーリング係数、y は垂直軸のスケーリング係数です。グラフを拡大するには、スケーリング係数として 1 より大きい数値を使用します。

スケール係数として 0 から 1 までの数値を使用します。このグラフィックでは、元のグラフィックを Scale (0.95,0.95) 60 ズームして画像が縮小されます。具体的なコードは次のとおりです。

：

上記のコードでは、そのトリガーイベントを設定して、関数showscaleprint（）、function showcaleprint（）を実行します。 (400,300) を原点にします

oScalePrint の塗りつぶしスタイルを設定し、60 回ループして、上記のグラフィックを完成させます

7. 行列変換

直接変更するtransformメソッド変形行列、つまり行列変換

context.transform(m11,m1 2,m21,m22,dx , dy)

原理は、コンテキストの元の座標 (x, y) に新しい座標を取得するための変換行列

変換の変換行列は次のように表されます:

m11 m21 dx

m12 m22 dy

0 0 1

変換メソッドは、この行列を使用して元の座標を乗算します。座標行列

x

y

l

行列の乗算については、次のアルゴリズムに従います。

1: 行列 A の列数が行数と等しい場合、A と B を乗算できます。マトリックスB。

2: 行列 C の行数は行列 A の行数に等しく、C の列数は B の列数に等しい。

3: 積 C の i 行 j 列の要素は、行列 A の i 行の要素と行列 A の対応する j 列の要素の積の和に等しい。マトリックスB。

上記のアルゴリズムに従って、新しい座標行列が得られます 1

つまり:

xNew = (m11)x+(m21)y+dx

yNew = (m12)x+( m22)y+dy

変換メソッドを使用して、特定のパラメーターを設定するだけです。それだけです。translate、scale、rotate などのメソッドを置き換えます。

行列変換を初めて見ると本当に混乱しますが、十分に深く学ぶと、すぐにこの方法が気に入っていただけるでしょう

1 つのステートメントを使用して、グラフィックスのズームと回転を完了します。