描画スタイルをスタックへ保持、取り出す(save・restore) [html5 の Canvas を使ってみる：第卅四回]

save(); で現在の描画スタイルを push し、restore(); ではそれを pop できるという。なんだか難しいけど、やってみる。ちなみに、W3C によると、利用できるのは以下のものらしい。

• The current transformation matrix


• The current clipping region


• The current values of the following attributes:
  strokeStyle
  fillStyle
  globalAlpha
  lineWidth
  lineCap
  lineJoin
  miterLimit
  shadowOffsetX
  shadowOffsetY
  shadowBlur
  shadowColor
  globalCompositeOperation
  font
  textAlign
  textBaseline

★html 側

<canvas id="save"></canvas>

★Javascript 側

onload = function() {
// 画面ロード時に描画を実行
  draw();
};
function draw() {
// id: save で 2 次元描画を行うことの定義
  var c = document.getElementById("save").getContext('2d');

// strokeStyle で線を青く、
// globalAlpha で透明度を 0 から 100 まで適用
// これを save(); でスタックに格納していく
  for (var i = 0; i <= 100; i++) {
    c.strokeStyle = "rgb(0, 0, 255)";
    c.globalAlpha = i/100;
    c.save();
  }

// save(); で格納したスタイルを取り出しつつ、
// x 軸に 1 ずつずらしながら線を描画
  for (var i = 0; i <= 100; i++) {
    c.restore();
    c.beginPath();
    c.moveTo(0+i, 0);
    c.lineTo(0+i, 100);
    c.stroke();
  }
}

すると、こうなる。右へいくほど透明度が 100 に近づくので、右へ向かって消えるグラデーションのようになる。


確認環境：
Safari 5.0、Chrome 5.0.375.70、Firefox 3.6.3、Opera 10.53

W3C；
4.8.11 The canvas element — HTML 5