|
HTML5＋CSS3 |
HTML5編
|
| Lesson 11 | 新機能の使用方法(3) canvas要素(後編) |
|||
| 制作・文 | 菅沼辰弥（株式会社ロクナナ） |
| HTML5にはcanvasという仕様が策定されている。画像ファイルがなくても、これを使えばJavaScriptで図を描き、状況に応じて内容を変化させるなどの表現ができるようになった。 |
※前編はこちら
簡単な図形を描く(5)
arc()は円弧を描くメソッドで、引数を6つ必要とする。順に中心の座標x、y、半径、始点の角度、終点の角度、描画方向だ。arc()では弧度法が用いられるため、1周するためには2π（Math.PI*2）を指定する。2πよりも小さい値を渡すと欠けた円ができる。描画方向はfalseで時計回りを意味する【1】【2】。
ここではRGBAではなくglobalAlpha プロパティで透明度を指定している。これはコンテキストのプロパティなのでcanvas上のすべての図形に透明度が適用される。RGBAの透明度と一緒に指定してしまうと掛け合わされた値が使われるので注意が必要だ。
次は、始点と終点が一致しないような引数でarc()を描画してみる【3】。始点は0度の位置、終点はMath.PI*0.5となっている。この位置はMath.PI（180度）の半分なので、下側に90度の位置になる。（-Math.PI*0.5 とすると上側の90度の位置）この図形を描画すると【4】のようになる。塗りは問題ないが、枠線が直線の部分に描画されない。これはパスを閉じていないことが原因だ。枠線をきちんと閉じたい場合は、lineTo()やclosePath()などで始点までパスを引く必要がある【5】【6】。
【1】
【2】
【3】
【4】
【5】
【6】
図形に
図形に影を付ける場合にも、専用のプロパティがいくつか用意されているので、簡単に表現することができる【6】。
shadowBlur は影のぼかしの強弱を設定することができる。0 にするとぼかしが加わらず、くっきりした影が表示される。shadowColor は名前の通り影の色を設定できる。
shadowOffsetX とshadowOffsetYは影の位置を変更する際に使う。図形と同じ位置が0となり、数値が増えるにつれてXは右方向、Yは下方向にズレていく【7】。fillもしくはstrokeで図形が描画されていないと、影も描画されることはないので注意しよう。
【7】青い円に黒い影を表示させる
【8】円から右に10px、下に10pxの位置に影が表示される
グラデーションで
canvas ではグラデーションで複雑な色を表現することも可能だ。単色であればfillStyleを使えば簡単に色を付けることができるが、グラデーションはスクリプトも少し複雑になる。
線形グラデーションを使用するためには、まずcreateLinearGradient()メソッドを実行してオブジェクトを用意し、何度かaddColorStop()メソッドを使って色の変化を設定していく【9】。
createLinearGradient() の引数にはグラデーションの開始位置x、yと終了位置x、yを渡し、返されるオブジェクトを変数gradに格納する。grad.addColorStop()の引数には色の位置と色を指定する。 色の位置はcreateLinearGradient() に渡した開始位置が0、終了位置が1にあたる。色の設定を終えたらfillStyleにgradオブジェクトを代入するとグラデーションが矩形に適用される【10】。
線形グラデーションのほかにも、円形グラデーションを描くメソッドとしてcreate RadialGradient()が用意されている。メソッドの返り値をgradに格納し、線形グラデーションと同様にaddColorStop()で色を設定して、fillStyleにgradを代入するとグラデーションが図形に適用される【11】【12】。
【9】(20, 20)の地点から縦横160の正方形の塗りに線形グラデーションを適用することにする
【10】上では開始位置で赤、50% の位置で黄色、100%の位置で緑となるグラデーションを設定している
【11】createRadialGradient()の引数は順に、色の変化が始まる円形のx、y、半径、終わりの円形のx、y、半径
【12】中心から外に向かって赤、黄、緑と変化している
save()と
canvas 上では、save() とrestore() という便利なメソッドが用意されている。これは、save() で現在の状態を保存し、restore()で復元することができるというものだ。
【13】のスクリプトでは最初に青色と緑色に設定したfillStyleをそれぞれsave()したあと、赤色で四角形を描画している。本来ならば次に描画する四角形も赤色が継承されるはずだが、rect()の前にrestore()しているために、緑色と青色が呼び出されて、四角形が描画されている【14】。
この時に気を付けなければならないのは、例のように連続して複数のsave()をした場合、最初にrestore()されるのは直近にsave()した状態になることだ。save()した順と逆でrestore()されるのだ。
save()で保存できるのはあくまでも状態であって、rect()などで作成したパスは保存されないことも頭に入れておこう。
【13】
【14】赤色で大きな矩形を描いたあと、restore()で緑色・青色に戻してから矩形を描画している
canvasで
canvas で図形をアニメーションさせる方法を紹介するが、canvas にはアニメーションを表現するメソッドが存在しないので、実現させるためには1コマずつ消して、描いてを繰り返す必要がある【15】。
これまでと同様に最初はコンテキストオブジェクトを取得する。その次にclearRect()メソッドを使ってキャンバスの中身を初期化し、前のコマで描かれた図形を先に消しておく。clearRectは指定した矩形内のピクセルを初期化することができるため、アニメーションする際によく使われている。
x座標にmyXを代入したarc()メソッドで赤い円を描いた後、myXの値をインクリメント（1をプラス）して関数を閉じる。
この関数をsetIntervalで10ミリ秒に1度実行してみると、clearRectで初期化→円を描画→座標+1が繰り返され、円が左から右へアニメーションしているように見える【16】。
【15】
【16】上図から下図のように赤丸がアニメーションする
＞＞目次に戻る
簡単な図形を描く(5)
円
arc()は円弧を描くメソッドで、引数を6つ必要とする。順に中心の座標x、y、半径、始点の角度、終点の角度、描画方向だ。arc()では弧度法が用いられるため、1周するためには2π（Math.PI*2）を指定する。2πよりも小さい値を渡すと欠けた円ができる。描画方向はfalseで時計回りを意味する【1】【2】。ここではRGBAではなくglobalAlpha プロパティで透明度を指定している。これはコンテキストのプロパティなのでcanvas上のすべての図形に透明度が適用される。RGBAの透明度と一緒に指定してしまうと掛け合わされた値が使われるので注意が必要だ。
次は、始点と終点が一致しないような引数でarc()を描画してみる【3】。始点は0度の位置、終点はMath.PI*0.5となっている。この位置はMath.PI（180度）の半分なので、下側に90度の位置になる。（-Math.PI*0.5 とすると上側の90度の位置）この図形を描画すると【4】のようになる。塗りは問題ないが、枠線が直線の部分に描画されない。これはパスを閉じていないことが原因だ。枠線をきちんと閉じたい場合は、lineTo()やclosePath()などで始点までパスを引く必要がある【5】【6】。
【1】【2】
【3】
【4】
【5】
【6】
図形に
影を付ける
図形に影を付ける場合にも、専用のプロパティがいくつか用意されているので、簡単に表現することができる【6】。
shadowBlur は影のぼかしの強弱を設定することができる。0 にするとぼかしが加わらず、くっきりした影が表示される。shadowColor は名前の通り影の色を設定できる。
shadowOffsetX とshadowOffsetYは影の位置を変更する際に使う。図形と同じ位置が0となり、数値が増えるにつれてXは右方向、Yは下方向にズレていく【7】。fillもしくはstrokeで図形が描画されていないと、影も描画されることはないので注意しよう。
【7】青い円に黒い影を表示させる
【8】円から右に10px、下に10pxの位置に影が表示される
グラデーションで
表現の幅を広げる
canvas ではグラデーションで複雑な色を表現することも可能だ。単色であればfillStyleを使えば簡単に色を付けることができるが、グラデーションはスクリプトも少し複雑になる。
線形グラデーションを使用するためには、まずcreateLinearGradient()メソッドを実行してオブジェクトを用意し、何度かaddColorStop()メソッドを使って色の変化を設定していく【9】。
createLinearGradient() の引数にはグラデーションの開始位置x、yと終了位置x、yを渡し、返されるオブジェクトを変数gradに格納する。grad.addColorStop()の引数には色の位置と色を指定する。 色の位置はcreateLinearGradient() に渡した開始位置が0、終了位置が1にあたる。色の設定を終えたらfillStyleにgradオブジェクトを代入するとグラデーションが矩形に適用される【10】。
線形グラデーションのほかにも、円形グラデーションを描くメソッドとしてcreate RadialGradient()が用意されている。メソッドの返り値をgradに格納し、線形グラデーションと同様にaddColorStop()で色を設定して、fillStyleにgradを代入するとグラデーションが図形に適用される【11】【12】。
【9】(20, 20)の地点から縦横160の正方形の塗りに線形グラデーションを適用することにする
【10】上では開始位置で赤、50% の位置で黄色、100%の位置で緑となるグラデーションを設定している
【11】createRadialGradient()の引数は順に、色の変化が始まる円形のx、y、半径、終わりの円形のx、y、半径
【12】中心から外に向かって赤、黄、緑と変化している
save()と
restore()
canvas 上では、save() とrestore() という便利なメソッドが用意されている。これは、save() で現在の状態を保存し、restore()で復元することができるというものだ。
【13】のスクリプトでは最初に青色と緑色に設定したfillStyleをそれぞれsave()したあと、赤色で四角形を描画している。本来ならば次に描画する四角形も赤色が継承されるはずだが、rect()の前にrestore()しているために、緑色と青色が呼び出されて、四角形が描画されている【14】。
この時に気を付けなければならないのは、例のように連続して複数のsave()をした場合、最初にrestore()されるのは直近にsave()した状態になることだ。save()した順と逆でrestore()されるのだ。
save()で保存できるのはあくまでも状態であって、rect()などで作成したパスは保存されないことも頭に入れておこう。
【13】
【14】赤色で大きな矩形を描いたあと、restore()で緑色・青色に戻してから矩形を描画している
canvasで
アニメーションを表示
canvas で図形をアニメーションさせる方法を紹介するが、canvas にはアニメーションを表現するメソッドが存在しないので、実現させるためには1コマずつ消して、描いてを繰り返す必要がある【15】。
これまでと同様に最初はコンテキストオブジェクトを取得する。その次にclearRect()メソッドを使ってキャンバスの中身を初期化し、前のコマで描かれた図形を先に消しておく。clearRectは指定した矩形内のピクセルを初期化することができるため、アニメーションする際によく使われている。
x座標にmyXを代入したarc()メソッドで赤い円を描いた後、myXの値をインクリメント（1をプラス）して関数を閉じる。
この関数をsetIntervalで10ミリ秒に1度実行してみると、clearRectで初期化→円を描画→座標+1が繰り返され、円が左から右へアニメーションしているように見える【16】。
【15】
【16】上図から下図のように赤丸がアニメーションする
