canvas
canvasについて調べます。
canvasの特徴
・html5で標準化されている。
・特定のブラウザを除き広くサポートされている。
・メソッドを呼び出して画面(図形)を描画します。
・canvasタグ内で描画APIを呼び出して画面を描画します。
SVGとの違い
svgはxml構造のツリー構造で画面を構築します。
canvasはメソッドを呼び出すことで図形を描画します。
その為の描画APIも多数あります。
描画メソッドはcanvasタグでは定義されておらず、描画コンテキストに定義されています。
描画コンテキストはcanvasタグ内で実行するjavascriptでgetContext()メソッドにより呼び出すことができます。
単純なサンプル
以下に簡単なcanvasのサンプルを用意しました。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
// canvasのDOMを取得
const canvas = document.getElementById('canvas');
// getContextメソッドでコンテキストを取得
// ここでは2次元の平面的な図形を扱うので、引数に「2d」を指定
const ctx = canvas.getContext('2d');
// コンテキストのstyleを定義(背景色: グレー、大きさ: 150の正方形)
ctx.fillStyle = '#cccccc';
ctx.fillRect(0, 0, 150, 150);
</script>
</body>
</html>
画面アクセスすると、150pxの正方形が表示されます。
以降、canvasでどんなことができるのか、試していきます。