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

JavaScript – クラス

クラスの構築

コンストラクタ

JavaScriptではクラス定義はなく、コンストラクタを関数で定義する。

  • thisはこの関数が含まれるオブジェクト(のインスタンス)を指す
  • newによって新しいオブジェクトの無名インスタンスが生成される
  • 代入演算子(=)によって、変数が上記のインスタンスを参照する
  • その結果、thisは定義されたインスタンスを指す

コンストラクタで定義されていないプロパティでも、インスタンスごとに後から追加可能だが、これは可読性やクラスとしての一貫性を損なう。

インスタンスの識別

同じクラスのインスタンスへの参照が同一か異なるかを比較することができる。

この比較はthisを用いても可能。

メソッド

非効率的な方法

コンストラクタの中で、プロパティと同じようにthis.[関数名]と無名関数定義によってプロパティを定義可能。

ただし、thisで指定された対象はインスタンスごとに生成・保持されるため、上記コードではインスタンスの数分のメソッドが生成されてしまう。

prototypeによる方法

JavaScriptにおける全てのオブジェクトはObjectに由来する。すべてのオブジェクトはObject.prototypeからメソッドとプロパティを継承しているが、それらは上書きすることが可能。

インスタンスでメソッドを実行しようとした時にそのメソッドが存在しない場合、そのクラスのprototypeにメソッドを探しに行く。 新たに定義したクラスのprototypeプロパティに関数を定義しておくことで、全てのインスタンスが共通のprototype下のメソッドを利用することになる。

prototypeにメソッドを定義する方法の一つは、メソッド単位でクラスのprototypeに登録する方法と、オブジェクトリテラルでまとめて定義する方法がある。

メソッド単位で定義する方法

メソッドごとにクラスのprotottypeに一つずつ記述していく方法。

オブジェクトリテラルでまとめて定義する方法

クラスの初期設定時に連想配列で定義する。

この方法は、新規にメソッドを定義する場合に一回のみ使用するもので、後から同じ方法でメソッドを追加しようとしした場合、最初の定義内容がすべてオーバーライドされる。

ただ、メソッド定義を敢えてダイナミックに変更するのでなければ、この方法はメソッドの定義のあり方として明快ともいえる。

メソッド定義の注意点

クラスの生成はコンクトラクタの前後を問わないが、メソッドを実行する段階では、prototypeへのメソッドの登録が実行済みでなければならない(記述位置の前後関係ではなく、関数呼び出しも含めた実体上の実行順序)。

C++やJavaなどコンパイラが全体の宣言・定義をパースする場合は問題ないが、インタプリタ系のJavaScriptは、定義=宣言と実行の順序については厳しい。

継承

子クラスのprototypeに親クラスを登録することで継承でき、親クラスのプロパティ、メソッドも利用可能となる。

これは厳密な意味でのクラスの継承というよりは、そのような挙動をするためのprototypeチェーンに組み込んだというところ。

注意点

子クラスのメソッドの定義は必ず親クラスの継承の後で行うこと。継承の際にprototypeの内容が上書きされてしまうため、継承の前にメソッド定義すると子クラスのメソッドが参照されなくなってしまう(下記の例では、”instance.setAge is not a function”とエラーになる)。

子クラスのメソッド定義でオブジェクトリテラルを使ってはいけない。継承の後にこれを行うと、親クラスのメソッドがすべて上書きされてしまう。

 

JavaScript – 変数・スコープ

変数のスコープ

グローバルスコープ/ローカルスコープ

  • var宣言で定義された変数は、その関数内のローカルスコープ
  • var宣言なしで定義された変数は、どこで定義されてもグローバルスコープ

ブロックスコープ

JavaScriptにはブロックスコープの概念はない。

関数の中のif{}やfor{}など複数のブロックで同じ変数名を用いると、関数内で共通の変数になる。

特に、for文のループカウンタなどの一時的な変数は、不用意にvar宣言なしで用いると、予期しないところでグローバルに影響を与えてしまう可能性がある。

関数の引数のスコープ

関数の引数はvarなしで宣言するが、スコープは関数内ローカルとなる。

  • グローバル領域でn = 1を定義
  • f( n )で引数を引き取った後、関数内ではn == 1
  • 関数内でnをインクリメントし、n = 2
  • 関数の結果はf( n ) = 2
  • その後、グローバル領域でn == 1で変化していない

変数操作のタイミング

グローバル変数への操作は、スクリプトがの実行の際に行われる。htmlファイル内であれば、そのファイルが読み込まれた時。別のjsファイルの場合はそれが読み込まれた時。

ローカル変数への操作は、その関数が実行された時。

以下の例では、htmlファイル読み込み時にグローバル変数が定義・参照され、その後ボタンを押すたびにmain()関数が実行され、ローカル変数が定義・参照される。

 

JavaScript – データ型・演算

 

データ型

文字型

リテラル

文字列のリテラルを表すには、対になったダブルクォート(“)かシングルクォート(‘)で囲む。

エスケープ文字

\n NewLine(改行文字)
\f フォームフィード
\b バックスペース
\r キャリッジリターン
\t タブ
\’/\” シングルクォート/ダブルクォート
\\ バックスラッシュ
\0nn/\0onn 8進数
\xnn 16進数nnによる文字コード指定(ex. ‘A’=’\x41’)
\unnnn Unicode文字(ex. ‘あ’=’\u3042’)

数値型

JavaScriptでは、内部的にすべての数値が浮動小数点として扱われる。

整数値の表現

10進数 数字の列で指定。先頭の数字は0(ゼロ)以外。
8進数 先頭が0(ゼロ)である数字の列で指定。
16進数 先頭”0x”に続く0~9, a~fの列で指定、
  • 8進数、16進数では、負の値を表すことはできるが、小数部分はなく、浮動小数点表記は使用できない。

以下の例は、10進、8進、16進の各数値の演算結果をconsole.logに出力する。

浮動小数点数の表現

以下の4つの表現は全て同じ値を表す。

  • 0.0001
  • .0001
  • 1e-4
  • 1.0e-4

論理型(Boolean)

trueとfalseの二値。なお、比較式において以下の評価はすべてfalseとして解釈される。

  • 0
  • null
  • undefined
  • 空の文字列

特殊な値

Null Null型にはnullという値が1つだけある。typeof演算子ではnull値はnull型ではなくObject型として扱われる。
 undefined  未定義の変数を参照した場合に返される。
 NaN  不適切な値で、以下の場合に返される。

  • 未定義の変数を含む数値演算
  • 文字列を含む数値演算
  • ゼロをゼロで除算した場合
 Infinity  正の無限大。計算結果が正の数値でオーバーフローした場合や、通常の正の数値をゼロで割った場合に返される。
 -Infinity  負の無限大。計算結果が負の数値でオーバーフローした場合や、通常の負の数値をゼロで割った場合に返される。

演算

代入演算子

代入演算子は、文字列/数値のリテラル/変数を変数に割り当てる。

文字列演算子

結合演算子

“+”演算子は2つの文字列を結合。

数値演算子

算術演算子

Javaと同じ算術演算子+、-、*、/、%(剰余)、インクリメント/デクリメント演算子++、–がある。

比較演算子

Javaと同じ演算子==、!=、<、>、<=、>=がある。

論理演算子

Javaと同じ演算子、&&、||、!(否定)がある。

複合代入

演算結果を代入する場合、複合代入演算子の短縮表記も可能。

条件演算子

==、!= 等しい/等しくない
===、!== 同一である/同一でない

たとえば文字列と数値を比較するとき、==を用いると文字列がNumber型に変換され比較される。

一方===では型変換は行われない状態で、厳密にその内容が等しいかどうかが比較される。

typeof演算子

引数の型に応じて、以下の文字列が返される。

数値 number
文字列 string
オブジェクト object
配列 object
関数 function
論理型 boolean
null number
NaN number
undefined undefined

文字列と数値が混在した演算

以下のルールに従う。

  • 数値同士の演算の結果は数値
  • 二項のうち少なくとも一つが文字列の場合、数値であっても文字列と評価し、結果は文字列
  • 先頭から演算を進め、数値が続く限りは数値演算を続け、一旦文字列演算になると以降は全て文字列演算として評価。
1 + 2 3
“1” + 2 “12”
1 + “2” “12”
1 + 2 + “3” “33”
1 + “2” + 3 “123”
“1” + 2 + 3 “123”

JavaScript – 記述位置

記述位置と記述方法

  • HTMLソース内に直接記述
  • HTMLソース内に関数を直接記述
  • HTMLからJavaScriptの外部ファイルを読み込み

HTML内への直接記述

HTMLソースに以下のように記述。

正確には<script type=”text/javascript”>だが、HTML5ではscript要素のtype属性はデフォルトでJavaScriptなので省略可能。

関数の直接記述

head要素内に以下を記述し、

body要素で以下のように記述することもできる。

外部ファイルの読み込み

例えば以下の内容のファイルを”test1.js”として準備。

保存する場所は、HTMLファイルと同じディレクトリにある”js”ディレクトリの下とする。

headセクションで以下のようにスクリプトファイルを読み込む。

そして、たとえば以下のように関数を呼び出して実行。

覚え書き

VistaとSugarSyncでの問題

Windows Vista上のSugerSyncと同期したフォルダ内でこれを実行したところ、alert内の文字が文字化けしてしまった。HTMLソースがUTF-8で、scriptタグの属性に明示的に”charset=UTF-8″を記述しても解消されない。また、スクリプトソースの<!–などのコメントを除き、出力文字を全て半角としても現象は変わらない(そもそもalertダイアログの冒頭に表示される日本語が文字化けしている可能性もある)。

これに対して、デスクトップ上に新たなフォルダをつくり、関係するHTMLファイルとCSSファイルを移動させて実行したところ、以下のような挙動。本現象が発生したVista+SugarSyncの不安定性に関しては、今しばらく調査が必要。

  • デスクトップ上に”dev”フォルダを作成し、SugarSyncの動機フォルダから必要なファイルとフォルダを移動
  • devフォルダ内のhtmlファイルを直接エディタで編集可能
  • しばらく編集、保存、ブラウザ表示を繰り返していると、htmlファイルにロックがかかる
  • devフォルダの名前を変更しようとしたところ、ロックがかかる
  • 表示中のブラウザを閉じるとロックがかからんくなったので、フォルダ名をdev→dvに変更
  • その後ロックがかからなくなる

2015-12-21.