サイト内検索

save() / restore() メソッド

実行結果

コード

/* 描画状態を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();
}