HTML5 – Canvas

基本手順

  1. HTMLでのcanvas要素の設置、またはスクリプトでcanvas要素の動的な作成と埋め込み
  2. canvasオブジェクトの取得と描画コンテキストの取得
  3. 描画コンテキストに対する描画

canvas要素の準備

HTMLに書く場合

id、幅と高さのほか、背景色や枠線など一般的なスタイルも設定可能。idを通して、スクリプトでcanvas要素のオブジェクトを取得する。

canvasオブジェクトと描画コンテキストの取得

基本形

HTML要素でcanvasを配置し、JavaScriptで取得して操作する手順。

canvasオブジェクトに描画するために描画コンテキストを取得するが、その取得が可能かどうかの判定が必要。コンテキストは今のところ2Dのみ提供されている。

JavaScriptによる標準的な手順

※”2d”の引数を”2D”とすると読み込んでくれないので要注意。また、後述の注意点を参照。

実行結果

javascript-canvas-fillrect

CoffeeScriptとjQueryによる標準的な手順

注意点~オブジェクト取得のタイミング

先の基本手順のスクリプトファイルをheadセクションで読み込んで実行すると、canvasオブジェクトが適正に読み込まれず、コンテキストがnullになってしまう。これは、canvasオブジェクトが形成される前にheadセクションでcanvasオブジェクトの処理を行うことになるため。

解決策として、DOMがすべて読み込まれてから必要なオブジェクトを取得するようにする。

スクリプトの読み込み位置を最後にする

外部ファイルをscript要素で読み込む場所を、</body>タグの直前のように最後に持ってくる。

DOMの読み込みが終わってから取得する

たとえばjQueryのjQuery(document).ready()を実装して、DOMがすべて読み込まれてから実行することを保証する。

基本の描画方法

単一の矩形

矩形や円弧など、単一の図形を一つの命令で書く方法。矩形の外形を描くstrokeRect()などが準備されている。

パスを指定する方法

以下の手順をとる。

  • 必要に応じて、線の色や太さ、塗りつぶしの色などのスタイルを設定~strokeStyleなど
  • 前のパスをリセットし、新しいパスの描画を始める~beginPath()
  • パラメータを指定して、直線や円弧などのパスを辿っていく~lineTo()など
  • それまでのパスの輪郭描画、塗りつぶしなどを行う~stroke()など

実行結果

html-canvas-basic

スタイル設定

色と背景

strokeStyle [= value]
線・輪郭の色やスタイルを指定。色指定の場合、red, blueなどの色名、”rgb(xx, xx, xx)”、”#dddddd”の3種類の指定方法。
fillStyle [= value]
塗りつぶしの色やスタイルを指定。

線のスタイル

lineWidth [= value]
線の幅を保持する。参照・設定可能。ゼロ以上有限の値のみ設定可能。初期値は1.0。
lineCap [= value]
ラインキャップ(“butt”, “round”, “square”)を保持する。参照・設定可能。
lineJoin [= value]
線の接合方法(“bevel”, “round”, “miter”)を保持する。参照・設定可能。
miterLimit [= value]
miter接合の場合の限界値を保持する。参照・設定可能。ゼロ以上有限の値のみ設定可能。初期値は10.0。
setLineDash([segments])
破線のパターンをセットする。パターンはリストで与え、[実線(, 間隔, 実線, 間隔...)]と記述。
getLineDash()
破線のパターンを返す。
lineDashOffset [= value]
破線パターンのオフセットを返す。

描画メソッド

矩形

strokeRect( x, y, w, h )
矩形の外枠を描く。
fillRect( x, y, w, h )
矩形の内側を塗りつぶす。塗りつぶしの基準となる外枠は、線の太さに関わらず線の中心線
clearRect( x, y, w, h )
指定した矩形の内部を背景色でクリアする。

canvasの描画は、ほとんどの場合線分、曲線、図形が繋がったパスとして描かれるが、矩形に関しては、パスとは独立した図形として描くメソッドが準備されている。

引数は4つで、左上のx座標、y座標、長方形の幅、高さ。

実行結果

javascript-canvas-rect

パス

パスの構成方法

パスは線分、円弧などの要素を連続して繋いだもので、パスの軌跡を描画するだけでなく、パスに対して内部を塗りつぶしたり、ある点がパスの内部にあるか判定したりすることができる。

パス描画の手順は、抽象的な構造を保存するパスに対して要素を追加していく段階と、それらに対して描画や塗りつぶしなどの操作を行う段階からなる。

パスの実装方法として、以下のいくつかがありうる。

beginPath()による直接描画
beginPath()メソッドで開始し、一連のパス追加などの操作の後、stroke()メソッドで描画する。パスの再利用はできない。
【例】画面中央に白抜きの三角形が描画される。

begtinPath()を書かないと、前の描画がリフレッシュされず全て残ってしまう。
stroke()を書かないとパスが描画されない。
パス構築を関数とする方法
パスの構築までを関数化し、その関数呼び出し後に描画する。関数を呼び出すことで、直前のパスとして再利用可能
【例】上記と同じ三角形が一旦白抜きで描かれた後、すぐに同じ三角形が黒で塗りつぶされて描かれる。
Path2Dオブジェクトを用いる方法
Path2Dオブジェクトのインスタンスにパスを追加し、これに対して描画する。パスオブジェクトが残るので、再利用可能。
【例】上記と同じく、白抜きの三角形の描画後に黒塗りの三角形が描画される。

 

クリッピング

<略>

パス内部の判定

  1. context.isPointInPath( x, y )
    • 現在の設定されているサブパスに対して、点(x, y)が内部にあればtrue、外ならばfalseを返す
  2. context.isPointInPath( path, x, y )
    • pathで指定されたPath2Dオブジェクトに対して、天(x, y)が内部にあるかどうかを判定する
直接描画に対する判定の問題

1番目の表現の場合、直前に構成されたパスが判定対象となる。以下の例では二つの矩形を描いているが、内部判定は最後に書かれた矩形に対してのみなされる。

javascript-canvas-inner

パス構成の関数化

複数のパスに対して判定を繰り返す場合、stroke()/fill()の描画メソッドを実行する前でもパスが構成されることを利用して、パス構成のための関数を切り分ける方法が考えられる。

Path2Dオブジェクトに対する判定

isPointInPath()メソッドの2番目の表現は、第1引数にpathを渡すことができる。各々のパスをPath2Dオブジェクトに保持することで、よりシンプルに内部判定を行うことができる。

パスの要素

線分
  • moveTo() 開始点に移動
  • lineTo() 次の点まで線を描く~以下、繰り返し
  • closePath() パスの終了時、開始点まで繋いでパスを閉じる場合に指定

実行結果

javascript-canvas-line

曲線
  • quadraticCurveTo(…)
  • bezierCurveTo(…)

<略>

円弧
  • arc( x, y, r, startAngle, endAngle, anticlockwise )
  • arcTo( x1, y1, x2, y2, r )

arcメソッドはパスの一部として円弧を描く。直前の座標軸からarcの開始点までと、arcの終了点から次の開始点なまでは線分が挿入される。

座標軸の正の方向が、x軸は右、y軸は下となっていることに注意。このため、一般的な数学表現と上限反転した体系になっていて、一般的な正の回転方向も時計回りとなる。

arcTo()メソッドの挙動は以下の通り。

  1. 直前の描画点(x0, y0)と(x1, y1)を結ぶ線分l1を想定する
  2. (x1, y1)と(x2, y2)を結ぶ線分l2を想定する
  3. 半径rでこの二つの線分に接する円弧を想定する(二つの直線の角をとるイメージ
  4. l1、l2と円弧の接点を算出する
  5. (x0, y0)~l1と円弧の接点を直線で結ぶ
  6. l1とl2を円弧で結ぶ
  7. l2の接点と次の描画開始点を直線で結ぶ

すなわち、(x2, y2)を次の描画開始点と一致させておけば、折れ線(x0, y0)~(x1, y1)~(x2, y2)の角が半径rの円弧で丸くなる。

実行結果

javascript-canvas-arc

矩形
  • rect( x, y, w, h )

rect()はサブパスを持つ矩形を描く。

  • 先行するパスとは接続しない
  • 後続のパスがある場合、(x, y)から次の描画開始点まで線分で結ばれる

実行結果

javascript-canvas-rectpath

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です