Lesson 10 新機能の使用方法(3) canvas要素(前編) - HTML5＋CSS3 次世代Webコーディングの超・最新動向・HTML5編

HTML5＋CSS3 次世代Webコーディングの 超・最新動向

HTML5編

	Lesson 10			新機能の使用方法(3) canvas要素(前編)
	制作・文			菅沼辰弥（株式会社ロクナナ）

HTML5にはcanvasという仕様が策定されている。画像ファイルがなくても、これを使えばJavaScriptで図を描き、状況に応じて内容を変化させるなどの表現ができるようになった。

HTMLの
記述

HTMLには、canvas要素を必要な場所に記述しておく【1】。必須の属性はないが、widthとheightを記述しないとブラ ウザの規定値で表示されてしまうので、記述しておくことをおすすめする。このcanvasに簡単な図形を描いていく。


【1】

簡単な図形を描く(1)
長方形

canvas に描画するためには、まずgetElementById() などで取得したcanvasノードに対してgetContext()メソッドを実行し、キャンバスとしてアクセスするためのコンテキストオブジェクトを取得する。このメソッドの引数には現在は2Dのみが実装されている。これをctに格納しておき、図を描画する際にctを通してメソッドを実行していく【2】。

strokeRect()は矩形を描画するメソッドで、引数に矩形の左上の座標xとy、幅と高さを指定する。fillRect()は同じく矩形を描画するメソッドだが、こちらは塗りつぶしで描画される。これら2つは単独で描画する機能までを持っており、とても簡単に扱える【3】【4】。


【2】



【3】



【4】

簡単な図形を描く(2)
三角形

矩形以外の図形は、点と点を繋いでいくパスという考え方で描画していく【5】 。beginPath() でこれから新しい図形を描き始めると宣言し、moveTo()で図形を描き始める座標まで移動する。そしてlineTo()で現在地から引数の座標まで直線を引く。lineTo()を連続して実行することで、パスを繋いでいくことができる。closePath()は現在の位置（パスの終点）から始点までを結び、パスを閉じることができる便利なメソッドだ。

最後にfillStyle プロパティで色を指定し、fill()メソッドを実行すると、これまでに作られたパスを描画することができる【6】。fill()を実行しないとブラウザには何も表示されないので注意が必要だ。fill()の代わりにstroke()を用いると、塗りつぶしではなく線で描画することができる【7】。線の色を指定するプロパティはstrokeStyle【8】だ。


【5】



【6】



【7】


【8】fillStyle に渡す文字列はCSS で使うものと同じで、#から始まる6 桁の16 進数やRGB、RGBAが利用可能だ

簡単な図形を描く(3)
二次ベジェ曲線

曲線を描くメソッドには二次ベジェ曲線を描くquadraticCurveTo()と三次ベジェ曲線を描くbezierCurveTo()がある。まずはquadraticCurveTo()を使って二次曲線を描いてみよう。

描き始めたい位置までmoveTo() で移動し、quadraticCurveTo() を実行する【9】。制御点とは曲線の形を決定するために必要な点で、これに引っ張られたような曲線になる。始点から始まって終点で終わるところはlineTo()と同じだが、それ以外の制御点を曲線が通過することは、基本的にない。

このスクリプトではquadratic Curve To()の次にlineWidthを設定しているが、これは線の太さを変更している。最後にstroke()で線を描画している。このスクリプトをブラウザで見ると【10】のようになる。

赤い点は制御点の位置を示している。二次曲線は制御点がひとつしかないので、あまり複雑な曲線を描くことはできない反面、単純な曲線であれば狙い通りに描きやすいというメリットがある。スクリプトがすっきりしていることもあって利用頻度は高い。特に角丸の矩形を描く際に重宝する。

直線の部分はlineTo() で、角の部分をquadraticCurveTo()を使って交互に描いてゆく。制御点を本来矩形の角があるべき位置に配置することと、制御点から始点と終点が同じ距離になるように気をつけると、綺麗に角丸が描けるはずだ【11】【12】。


【9】引数は順に制御点のx,y,終点のx,yを渡す



【10】



【11】



【12】

簡単な図形を描く(4)
三次ベジェ曲線

次は三次ベジェ曲線を描くbezierCurveTo() を使ってもう少し複雑な曲線を描いてみる。bezierCurveTo()の引数は制御点（1）のx、y、制御点（2）のx、y、終点のx、yの合計6つである【13】。

quadraticCurveTo()と比べて、制御点がひとつ多いことがわかる。始点と終点以外の制御点が2つになるので、線を2度曲げることが可能だ。配置次第でさまざまな曲線を描くことができる【14】。

canvas には三次以降の曲線を一度に描くメソッドは用意されていないが、連続してメソッドを実行することでそのように見せることは可能だ【15】【16】。


【13】



【14】



【15】



【16】