[69-10] canvasの描画の状態を保存・復元する save() と restore()

前回の「[69-9] canvasでグラフィックスの変形をしよう」で、1度指定した変形は初期化のソースを書かない限り、ずっと継承することがわかりました。
変形だけでなく、canvas では、線や塗り、透明度、フォントの指定などの描画の状態は、一度指定したらずっとそのまま変わらないという特徴がありますね。
今回はこのような描画の状態を一時保存したり、それを必要なタイミングで呼び出して復元するメソッド、save() と restore() を使ってみます。
これは、複雑な図形や、描画を何度も繰り返すアニメーションの場合に重宝します。

今回のサンプルはこちらです。

save() と restore()

サンプルでは、前回の「[69-9] canvasでグラフィックスの変形をしよう」サンプル2 と同じようにテキストを描画して、拡大・回転・移動をしています。
前回は「2倍に拡大したら直後に2分の1に縮小」などと、初期化をいちいち計算していましたが、 今回は 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() をつかって状態を保存しています。(8行目)
次に拡大したテキストを描画したら、restore() で状態を復元しています。(12行目)

このあとなんですが、ここでまた save する必要があるんです(13行目)。しないと効果無し。
最初の save はもう無効で、ここでまた状態を save しないと、次の回転のあとに restore で初期状態を呼び出そうとしてもダメでした。 saveと restore はペアで1セットみたいです。

保存機能は「一時保存」で、一度 restoreメソッドを実行してしまったら、saveメソッドで実行した保存内容は空っぽになるんだそうです。
restore() したら、すぐ save() 。コレを繰り返して使うようです。

save の対象となる「状態」のリスト

save() メソッドで保存できる描画の「状態」は、これまでいろいろやってみた 1度設定したらず〜っと影響を及ぼし続ける状態。それを全部リストアップしてみました。
(そしたら、今までの canvasの学習のリストになっちゃった(笑)ほぼ全部だね。)

アニメーションなどで描画を繰り返すなどの 複雑な指定の場合、これら↑をいちいち計算して初期化していたら大変。 save と restore はそのために用意されたんでしょうね。
(canvasでのアニメーションは後日詳細)

次回予告

今回の save と restore は、アニメーションを作ってみればもっとよく理解できるだろうと思います。せっかくcanvasを勉強するのだから、簡単なアニメーションくらいは作れるようになりたいと考えています。非エンジニアの私でもできるかな?!(笑)

さて、アニメーションの前に、是非やってみたいことがあります。
canvasでは、ビットマップ画像のピクセルを操作することもできるんだそうで、RGBの画像をモノクロにしたり、セピアにしたりできるんだって。
<img>要素の画像のピクセルをゲットして、それを編集してからcanvasに戻すこともできるとか。
次回はそれを試してみます。
(これがけっこうオモシロイです。やっとここからcanvasの醍醐味が味わえます♪)

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
03 | 2017/04 | 05
- - - - - - 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 - - - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.