canvas入門メモです。動作確認はgoogle chromeのみで行ないました。
何も無いcanvasを描く
まずは、何も無いcanvasを描きます。
描くためにcanvasタグを使用します。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DT\ D/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <style type="text/css"> canvas { border: solid 3px #000; } </style> <script type="text/javascript"> window.onload = function() { var canvas = document.getElementById('canvas'); var cc = canvas.getContext('2d'); // ここに描画処理を書いていく } </script> <title></title> </head> <body> <!-- canvas表示 --> <canvas id="canvas" width="300" height="200"></canvas> </body> </html>
何も表示されないcanvasが表示されると思います。
javascriptではcanvasを操作するためのプログラムを書いているのみです。
図形を描く
canvasに図形を描いていきます。
図形を描く処理は主に下記のようなパターンでプログラムを書いていきます。
// 描画パラメータ保存 cc.save(); // 描画設定開始 cc.beginPath(); ...描画設定 // 初期化 cc.restore();
例えば、ラインを引く時は下記のようになります。
cc.save(); cc.beginPath(); cc.lineWidth = 5; cc.lineTo(50, 120); cc.lineTo(250, 180); cc.stroke(); cc.restore();
cc.beginPath();の後にラインの太さ、始点と終点を設定しているのが分かると思います。
これにより、canvasに線が引かれるようになります。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DT\ D/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <style type="text/css"> canvas { border: solid 3px #000; } </style> <script type="text/javascript"> window.onload = function() { var canvas = document.getElementById('canvas'); var cc = canvas.getContext('2d'); cc.save(); // 線を引く cc.beginPath(); cc.lineWidth = 5; cc.lineTo(50, 120); cc.lineTo(250, 180); cc.stroke(); cc.restore(); cc.save(); // 影付き矩形を描く cc.beginPath(); cc.fillStyle = '#F00'; cc.shadowBlur = 5; cc.shadowColor = '#000'; cc.shadowOffsetX = 5; cc.shadowOffsetY = 5; cc.fillRect(30, 30, 100, 50); cc.restore(); cc.save(); // 円を描く cc.beginPath(); cc.strokeStyle = '#00F'; cc.arc(200, 100, 30, 0, Math.PI * 2, false); cc.stroke(); cc.restore(); }; </script> <title></title> </head> <body> <canvas id="canvas" width="300" height="200"></canvas> </body> </html>
アニメーション
アニメーションは、一定間隔で「canvasのクリア」と「図形の再描画」を行なう処理です。
javascriptでは、setInterval()関数で実装します。
下記のコードは、canvas内を円が跳ね返り回るものです。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DT\ D/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <style type="text/css"> canvas { border: solid 3px #000; } </style> <script type="text/javascript"> window.onload = function() { var canvas = document.getElementById('canvas'); var cc = canvas.getContext('2d'); // 円の初期座標 var x = canvas.width / 2; var y = canvas.height / 2; var r = 30; // 速度 var v_x = 2.0; var v_y = 2.0; // メインループ var loop = function() { // 円の座標を変更 x += v_x; y += v_y; // canvasの境界 if (x - r < 0) { x = r; v_x *= -1; } if (x + r > canvas.width) { x = canvas.width - r; v_x *= -1; } if (y - r < 0) { y = r; v_y *= -1; } if (y + r > canvas.height) { y = canvas.height - r; v_y *= -1; } // 円の描画 cc.save(); cc.beginPath(); cc.clearRect(0, 0, canvas.width, canvas.height); cc.restore(); cc.beginPath(); cc.strokeStyle = '#00F'; cc.fillStyle = '#00F'; cc.arc(x, y, r, 0, Math.PI * 2, false); cc.fill(); cc.stroke(); cc.restore(); // 次の実行 setTimeout(loop, 30); }; // 初期起動 loop(); }; </script> <title></title> </head> <body> <canvas id="canvas" width="300" height="200"></canvas> </body> </html>
このコードでは「setTimeout(loop,30);」という感じで、実行時間を固定で指定しています。
固定にするのではなくて、FPSの考えを取り入れる方法もあります。
下記のページで、FPSクラスを作って実行間隔を調整している例があります。
今更聞けないcanvasの基礎の基礎 : tech.kayac.com - KAYAC engineers' blog
