end0tknr's kipple - web写経開発

太宰府天満宮の狛犬って、妙にカワイイ

canvasのsave()が保存する対象は描画状態で、描画した図形ではない

http://www.html5.jp/canvas/ref/method/save.html

save() メソッドは、現在の描画状態のコピーを、描画状態のスタックの最後に加えなければいけません。

と記載されているだけでは分かりませんでしたが、記載されていたサンプルコードで理解できました。

/* 描画状態を3つ保存する */
var colors = new Array("red", "blue", "green");
var alphas = new Array(0.2, 0.5, 0.8);
for(var i=0; i<=2; i++) {
  ctx.fillStyle = colors[i];
  ctx.globalAlpha = alphas[i];
  ctx.save();
}
/* 保存した描画状態を適用しながら矩形を3つ描く */
for(var i=0; i<=2; i++) {
  ctx.restore();
  ctx.beginPath();
  ctx.arc( (i+1) * 25, 50, 20, 0, Math.PI*2, false);
  ctx.fill();
}