保存と復元
●save()、restore()
save() で保存、restore() で復元をします。
function Draw1() {
var ctx1 = document.getElementById('canvas1').getContext('2d');
/*テキストのスタイルを指定*/
ctx1.font= 'bold 15px sans-serif';
ctx1.fillStyle = '#07daba';
/*テキストをノーマル状態で描画*/
ctx1.fillText('saveとrestore=初期状態',30,30);
ctx1.save();/*この状態で保存*/
/*拡大*/
ctx1.scale(2,2);
ctx1.fillText('saveとrestore=拡大',30,30);
ctx1.restore();/*拡大をsave状態に戻しています*/
ctx1.save();/*この状態で保存*/
/*回転*/
var angle = 20*Math.PI/180;
ctx1.rotate(angle);
ctx1.fillText('saveとrestore=回転',30,30);
ctx1.restore();/*回転をsave状態に戻しています*/
ctx1.save();/*この状態で保存*/
/*移動*/
ctx1.translate(200,0);
ctx1.fillText('saveとrestore=移動',30,30);
ctx1.restore();/*移動もsave状態に戻しています*/
ctx1.save();/*この状態で保存*/
/*テキストを位置を変えて再びノーマルで描画*/
ctx1.fillText('saveとrestore=初期状態再び',30,110);
}
最初のノーマル状態の描画の後に「save()」を使用。
その後、restore() を使うたびに save() も記述して行く必要があります。