グラフィックス・アニメーション #
グラフィックス及びアニメーションについてを述べる。
Canvas(2D) #
Canvasを利用すると、Javascriptでブラウザ上に図を描画することができる。
Canvasを利用するには、HTMLでcanvas要素を用意する。
html
<canvas id="sample" width="100" height="100"></canvas>
Javascriptから、このcanvas要素を参照し、図の描画を行う。
Javascriptのサンプルコードを以下に示す。
//canvas要素取得
var canvas = document.getElementById('sample');
//2d用 コンテキストオブジェクト取得
var context = canvas.getContext('2d');
//円を描画
context.beginPath();
context.fillStyle = "red"
context.arc(30,30,20,0,Math.PI*2,false);
context.stroke();
表示例
javascriptでは、まずcanvas要素を取得して、その後にgetContext()関数で'2d’を指定する事で2d用のコンテキストオブジェクトを取得する。
その後に、コンテキストオブジェクトのプロパティ、関数を利用して図形の描画を行う。
コンテキストオブジェクトの主なプロパティ、関数は以下の通り。
| プロパティ名 | 意味 |
|---|---|
| canvas | 操作しているcanvasオブジェクト |
| globalAlpha | 図の透明度 |
| globalCompositeOperation | 図の合成方法 |
| strokeStyle | 線の色やスタイル |
| fillStyle | 塗り潰しの色やスタイル |
| shadowOffsetX | 水平方向の影の距離 |
| shadowOffsetY | 垂直方向の影の距離 |
| shadowBlur | 影のぼかし効果の設定 |
| shadowColor | 影の色 |
| lineWidth | 線の幅 |
| lineCap | 線の端の形状 |
| lineJoin | 線の接合箇所の形状 |
| font | テキストのフォント |
| textAlign | テキストのアラインメント設定('start','end','left','right','center'のいずれか) |
| 関数 | 意味 | 引数 |
|---|---|---|
| save() | 現在の描画状態を保存する | なし |
| scale() | 拡大・縮小する | 水平方向の伸縮率,垂直方向の伸縮率 |
| rotate() | 回転する | 回転する角度[rad] |
| rect() | 四角形を描画する | 左上の点のx座標、左上の点のy座標,幅、高さ |
| arc() | 円弧を描画する | 円の中心のx座標,円の中心のy座標,半径,円弧の開始位置[rad],円弧の終了位置[rad],時計回り(false)か反時計回り(true) |
| createLinearGradient() | 線形グラデーションを指定する | グラデーション開始点のx座標、y座標,グラデーション終了点のx座標、y座標 |
| createRadialGradient() | 円形グラデーションを指定する | グラデーション開始円中心のx座標,y座標,半径、グラデーション終了円中心のx座標,y座標,半径 |
| clearRect() | 四角形の形にクリアする | rect()と同じ |
| fillRect() | 塗り潰された四角形を描く | rect()と同じ |
| strokeRect() | 輪郭の四角形を描く | rect()と同じ |
| fill() | 現在の塗り潰し設定で塗りつぶす | なし |
| stroke() | 現在のスタイルで輪郭を描く | なし |
| beginPath() | 現在のパスをリセットする | なし |
| strokeText() | 輪郭のテキストを指定した座標に描画する | 描く文字列,文字列の左下の点のx座標,文字列の左下の点のy座標 |
| fillText() | 塗り潰しのテキストを指定した座標に描画する | strokeText()と同じ |
| moveTo() | 新しい開始点を座標指定する | 点のx座標、点のy座標 |
| lineTo() | 直前の座標と指定した座標を結ぶ直線を引く | 点のx座標、点のy座標 |
| quadraticCurveTo() | ２次ベジェ曲線を引く | 制御点のx座標,y座標、終点のx座標,y座標 |
| bezierCurveTo() | ３次ベジェ曲線を引く | 第１制御点のx座標,y座標、第２制御点のx座標,y座標、終点のx座標,y座標 |
色々使った例を以下に示す。
html
<canvas id="sample2" width="400" height="200"></canvas>
Javascript
//canvas要素取得
var canvas2 = document.getElementById('sample2');
//2d用 コンテキストオブジェクト取得
var context2 = canvas2.getContext('2d');
//円を描画
context2.beginPath();
context2.strokeStyle = "red";
context2.fillStyle = "yellow";
context2.arc(30,30,20,0,Math.PI*2,false);
context2.stroke();
context2.fill();
//四角形を描画
context2.beginPath();
context2.strokeStyle = "blue";
context2.fillStyle = "green";
context2.rect(10,120,40,40);
context2.stroke();
//線
context2.beginPath();
context2.lineWidth = 1;
context2.moveTo(200,120);
context2.lineTo(250,120);
context2.stroke();
context2.beginPath();
context2.lineWidth = 5;
context2.moveTo(200,140);
context2.lineTo(250,140);
context2.stroke();
context2.lineWidth = 10;
context2.moveTo(200,160);
context2.lineTo(250,160);
context2.stroke();
//円弧
context2.beginPath();
context2.lineWidth = 1;
context2.arc(200,20,30,Math.PI/4,Math.PI*3/4,false);
context2.stroke();
//テキスト
context2.beginPath();
context2.strokeStyle = "black";
context2.fillStyle = "black";
context2.strokeText('Text',300,40);
context2.fillText('Text',300,60);
//テキスト(フォント、文字サイズ)
context2.beginPath();
context2.font = 'bold 20px sans-serif'
context2.fillText('Text',300,100)
context2.font = 'italic 20px sans-serif'
context2.fillText('Text',300,120)
//テキスト(シャドー)
context2.beginPath();
context2.font = 'bold 20px sans-serif'
context2.shadowColor = 'red'
context2.shadowBlur = 3
context2.shadowOffsetX = 3
context2.shadowOffsetY = 3
context2.fillText('Text',300,140)
表示例
SVG #
SVG(Scalable Vector Graphics)とは、ベクター形式の画像フォーマットである。ベクター形式とは、点と点で結ばれた線で図形を表す方法である。これに対し、Canvasはピクセル形式での描画となる。
SVGは、XMLタグを使用して描画を行う。そのために使われるXML要素は主に以下の通りである。
| 要素名 | 意味 |
|---|---|
| circle | 円を作成する |
| ellipse | 楕円を作成する |
| line | 線を作成する |
| polygon | 多角形を作成する |
| rect | 四角形を作成する |
使用例を以下に示す。
html
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="100" r="30" stroke="black" stroke-width="3" fill="blue"></circle>
</svg>
表示例