InternetExplorerでは正式にはCanvasに対応していませんが,ExplorerCanvasというCanvasをエミュレートするJavascriptライブラリが登場したために,状況が変わってきました。
・ExplorerCanvas
以下のテンプレートを使って,Canvasの学習をしていきましょう。
ctx.beginPath(); | …パスの定義を開始する(以前のパスをリセットする) |
ctx.moveTo(100, 100); | …開始点座標を定義する |
ctx.lineTo(150, 150); | …直前の点からこの点にむかって線分を描画する |
ctx.lineTo(50, 150); | 〃 |
ctx.closePath(); | …開始点に向かって線分を描画し,パスを閉じる (このメソッドを実行しないと,閉曲線にならない) |
ctx.stroke(); | …Canvas上に描画する |
stroke()メソッドのかわりにfill()メソッドを使用すると,塗りつぶしになる。
2.円弧の描画
円弧を描くときの角度(ラジアン)は,x軸正の向きから時計回りに定義される。
円弧の描く向きは,反時計回りがtrue, 時計回りはfalse。
ctx.beginPath(); | …パスの定義を開始する(以前のパスをリセットする) |
ctx.arc(70, 80, 50, 0, Math.PI * 2, false); | …(70, 80)を中心として,50の半径で,開始角0から終了角2πまで,時計回りに描く。 |
ctx.stroke(); | …Canvas上に描画する |
stroke()メソッドのかわりにfill()メソッドを使用すると,塗りつぶしになる。
3.長方形(正方形)の描画
1.線分の描画によって,長方形や正方形の描画は可能だが,次のメソッドで,処理を簡略化できる。
ctx.strokeRect(x, y, w, h); | …輪郭の描画 |
ctx.fillRect(x, y, w, h); | …塗りつぶし |
ctx.clearRect(x, y, w, h); | …クリア |
いずれも,(x, y)が左上端の座標,wが幅,hが高さ。
4.色の定義
何も指定されていなかったら,黒になる。
輪郭描画の際は,
ctx.strokeStyle = "#ff0000";
などとしてから,stroke コマンドを実行する。
塗りつぶし描画の際は,
ctx.fillStyle = "#0000ff";
などとしてから,fill コマンドを実行する。
ctx.fillText(text, x, y); | …テキストを塗りつぶす(通常こちらを使う) |
ctx.strokeText(text, x, y); | …テキストの輪郭を描画する |
ctx.font = "24px 'Arial'"; | …フォントの形状。CSSと同様に定義する |
ctx.textAlign = "left"; | …left(左寄せ), right(右寄せ), center(センタリング)がある。 |
ctx.textBaseLine = "bottom"; | …Top, middle, bottomなどがある。デフォルトはalphabetic |