【JavaScript】canvasについて勉強する

今更ながら、canvasタグにしっかりと触れていこうと思い、
初歩的なところから勉強をはじめたのでそのメモ。

勉強のためにやっていること

canvas チュートリアル – Web developer guide | MDN
を１から読みこんでcanvasに対する勉強。
codepenにひたすら書き込む。

「canvas html5」などのワードで検索し公開されているコードを書き換え。

<canvas>でできること

<canvas> 要素は、JavaScriptで図形を描くための HTML 要素。主な活用法は下記。

• グラフを描く
• 写真の合成
• アニメーション

特殊な訓練を受けるとこんなことまでできる

Particles in space

See the Pen Particles in space by Dean Wagman (@deanwagman) on CodePen.

Mechanical Grass

See the Pen Mechanical Grass by Tim Holman (@tholman) on CodePen.

canvasの仕様は、Appleが Mac OS X の Dashboard のために初めて導入され、後に Safari に実装された。（つまりはsafariがブラウザで最初のサポート）
Appleが先駆けってことですね。

ブラウザのサポート状況

Can I use…

デフォルトのbasic supportなら、IE9以降のブラウザなら対応しているみたいですね。
HTML5で正式勧告されているので、まあ当然っちゃ当然。

WebGLなどの高度なものになるとまた別みたいです。。。

実際に書いてみる（長方形）

まずはcanvasで最も簡単な「rectangle（長方形）」を書いてみます。
記述方法は下記になります。
canvasに短形を描くには、３種類の関数が存在。

// 塗りつぶし
canvas.fillRect(x座標, y座標, 幅, 高さ);
// 枠線
canvas.strokeRect(x座標, y座標, 幅, 高さ);
// クリア
canvas.strokeRect(x座標, y座標, 幅, 高さ);

MDNで紹介されている通りですが、１から記述。

 title="html"]
<canvas id="canvas" width="300" height="300"></canvas>

 title="javascript"]
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
  var ctx = canvas.getContext("2d");
  ctx.fillRect(25, 25, 100, 100);
  ctx.clearRect(45, 45, 60, 60);
  ctx.strokeRect(50, 50, 50, 50);
}

ポイント

グリッドの原点は左上の角 ( 座標 (0,0) )になる。
全ての要素がこの原点から相対的に配置

実行結果

See the Pen 【JavaScript】canvasの表示テスト１ by nkmrkisk (@rekid) on CodePen.

実際に書いてみる（直線パスで図形描写）

canvasでのパスの描写には、以下の関数を利用します。

moveTo(X,Y) // パスは書かずに座標の移動
lineTo(X,Y) // 指定した座標までパスを引く
beginPath() // パスの初期化
closePath() // パスを閉じる
stroke()    // パスに実線を引く
fill()      // パスの中を塗りつぶす

これを使って、三角形を描写します。

三角形を表示する

 title="html"]
<canvas id="canvas" width="300" height="300"></canvas>

 title="javascript"]
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
  var ctx = canvas.getContext("2d");
  ctx.beginPath();
  ctx.moveTo(75,50);
  ctx.lineTo(100,75);
  ctx.lineTo(100,25);
  ctx.fill();
}

実行結果

See the Pen 【JavaScript】canvasの表示テスト２ by nkmrkisk (@rekid) on CodePen.

感想

初歩すぎる。。。。。。