canvasのsave()とrestore()メソッド

キャンバスに適用する効果は蓄積できるので、いくつかの簡単な関数を利用して効果を「組み合わせる」ことができます.たとえば、スクリーンに描画する前に、回転、変換、スケールを必要とする宇宙船がある場合があります.すべての効果がキャンバスに作用するため、これらの効果は、ある画像や形状(宇宙船など)だけでなく、スクリーンに描画されるすべてのオブジェクトに適用されます.
ここで、save関数とrestore関数は、これらの累積された効果を適用するための簡単なメカニズムを提供し、これらの効果を適用した画像またはグラフィックをキャンバスに描画し、これらの変更を「取り消す」ことができます.バックグラウンドの操作は何ですか?save関数は現在の描画状態をスタックに押し込み、restore関数は最後の状態をスタックにポップアップします.前述した宇宙船を例にとると、以下の操作が必要です.
呼び出しsave関数(現在の描画状態を保存)コンテキストの回転、変換、およびスケーリング
描画宇宙船restore関数を呼び出し、saveメソッドが前回呼び出されてから追加された効果、すなわち元に戻す前の変化を除去する.
例:
function draw(){currentTime+=secondsBetweenFrames;sineWave=(Math.sin(currentTime)+1)/2;context.clearRect(0,0,canvas.width,canvas.height);///contextのclearRectメソッドcontext.save();////contextのsave()メソッドcontext 2 D.translate(halfCanvasWidth-halfImageDemension,halfCanvasHeight-halfCanvasHeight fImageDemension);//contextのtranslate()メソッドcurrentFunction()    context.drawImage(image,0,0);//contextのdrawImage()メソッドcontext.restore();//contextのrestore()メソッド}
   
ここでは、この2つの方法を組み合わせて使用します.まず、キャンバスに効果を適用する前に、ペイント状態を保存します.

context2D.save();

ペイント状態を保存したら、ターゲットエフェクトを適用します.このため、translate関数を最初に呼び出し、次に描画する画像をキャンバス上で中央に配置します.

context2D.translate(HALFCANVASWIDTH - HALFIMAGEDIMENSION, HALFCANVASHEIGHT - HALFIMAGEDIMENSION);

次に、変数currentFunctionによって参照される関数を呼び出します.これらの参照される関数こそ、画像にalpha(透明度)の変化やスケール、回転、切断を生じさせる鍵です.これらの関数は後で紹介します.

currentFunction();

画像に効果を適用すると、キャンバスに描画できます.そこで、drawImageを呼び出して絵を描きます.

context2D.drawImage(image, 0, 0);

最後にrestore関数を呼び出し、save関数を呼び出してから適用されたすべての効果をキャンバスから削除します.

context2D.restore();