JavaScript入門[HTML5編]描画情報の保存・復元

canvasの描画情報を保存・復元する

canvasの描画情報を保存・復元するには、save()，restore()を使います。

context.save()

canvasの描画情報を保存します。

context.restore()

save()で保存した描画情報を復元します。

保存される描画情報の幾つかを以下に挙げておきます。

canvas描画情報を保存し復元させるサンプル

以下のサンプルでは、キャンバスの色（fillStyle）を保存していきます。

<canvas id="cv1" width="360" height="240"></canvas>
<script>
var ctx = document.getElementById("cv1").getContext("2d");

//色を変換して矩形を描く関数
function colset()
{
  var r = Math.floor( Math.random() * 256 );
  var g = Math.floor( Math.random() * 256 );
  var b = Math.floor( Math.random() * 256 );
  
  ctx.fillStyle ="rgb(" + r + "," + g + "," + b +")";
  ctx.fillRect(0,0,360,240);
}

//fillStyleの情報を保存する関数
function cv_save()
{
  ctx.save();
}

//fillStyleの情報を復元する関数
function cv_load()
{
  ctx.restore();
  ctx.fillRect(0,0,360,240);
}
</script>

<form>
<input type="button" value="色変更" onclick="colset()">
<input type="button" value="保存" onclick="cv_save()">
<input type="button" value="復元" onclick="cv_load()">
</form>

＜描画結果＞canvasタグにはCSSで二重線の枠を付けています

save()は何度でも保存が行えます。例えば、青→黄色→ピンクと３回保存したとします。 これでrestore()を呼び出すと、呼び出す度にピンク→黄色→青と変わっていきます。

キャンバスの変形を保存・復元する

もう一つサンプルを見てみましょう。以下のスクリプトでは、 for文を使ってsetTransform()の第2引数を変えながら、矩形を描いていきます。 変形の度にsave()を使って保存します。

その後、「復元」ボタンを押してみてください。 傾き具合が戻りながら文字が描かれていきます。

<canvas id="cv2" width="360" height="240"></canvas>
<script>
  var ctx2 = document.getElementById("cv2").getContext("2d");

  ctx2.fillStyle ="rgba(255,0,255,0.3)";
  ctx2.strokeStyle = "green";
  ctx2.font = "normal 32px Arial";
  ctx2.textBaseline = "top";

for ( var i = 0; i < 5 ; i++ )
{
  ctx2.setTransform(1,0.2*i,0,1,0,0);
  ctx2.fillRect(0,0,360,40);
  ctx2.save();  //右側の傾きを5回に渡り保存

}

//傾き具合を１回戻してテキストを描画する関数
function r_text(){
  ctx2.restore();
  ctx2.strokeText("restore",100,0); 
}  
</script>
<form>
<input type="button" value="復元" onclick="r_text()">
</form>

＜描画結果＞canvasタグにはCSSで二重線の枠を付けています

この他にrotate()やtransform()でも試してみましたが、 きちんと保存されていました。