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

更新日:2019.08.08
  1. HOME
  2. JavaScript入門[HTML5編]
  3. 描画情報の保存・復元

このページではcanvasの描画情報を保存したり復元したりする方法を見ていきます。

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

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

context.save()
canvasの描画情報を保存します。
context.restore()
save()で保存した描画情報を復元します。

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

線と形状
lineWidth, lineCap, miterLimit
色と不透明度
strokeStyle, fillStyle
シャドウ
shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor
文字関係
font, textAlign, textBaseline
変形情報
setTransform, rotate, translate

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

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

  1. 「色変更」ボタンを押すと、その度に違う色の矩形を描きます。
  2. 「保存」ボタンを押すと、現在の色を記憶します。
  3. 「復元」ボタンを押すと、記憶した色で矩形を描きます。
<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()は何度でも保存が行えます。例えば、青→黄色→ピンクと3回保存したとします。 これで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回に渡り保存

}

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

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

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

data-matched-content-rows-num="4,2" data-matched-content-columns-num="1,3" data-matched-content-ui-type="image_stacked,image_card_sidebyside">