CanvasとWebGLの周辺技術について学ぶ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
</head>
<body>
<canvas class="canvas" width="300" height="300"></canvas>
<script>
const canvas = document.querySelector('.canvas');
const context = canvas.getContext('2d');
context.fillStyle = 'salmon';
context.fillRect(0, 0, 300, 300);
context.textAlign = 'center';
context.font = '48px sans-serif';
context.fillStyle = 'white';
context.fillText('Hello World!', 150, 150);
</script>
</body>
</html>こんな画像が表示されればOK。
HTML5で新たに導入されたAPI群の一つ。DirectXやOpenGLと似たような、「画面への図形の描画」を行うことができる。
Canvasは他の要素と異なり、内部にDOMを持たない。つまり保持するのは描画されたピクセルのデータのみであり、そこになにが描画されたかという情報を保持しない。
CanvasのAPIは上の Hello World でみた通りかなりめんどくさいものであり、また一度描画した物体を動くすために画面を再描画する処理を自力で実装しないといけない。
そのため、Canvasを簡単に扱うためのラッパーライブラリが(一時期はゴミのように)たくさん存在しており、実際にCanvasを扱うときはこれらのうちのどれかを用いることになると思われる。
例えば⋯⋯
などなど。
- 高速
- Flashの代替
さきほど挙げた例は、CanvasRenderingContext2Dという主にCanvasの2次元描画を扱う実装を使っていたが、Canvasにはこれ以外にもいくつかのコントキストが用意されている。
その中で最も有名なのが、WebGLである。これはブラウザからGPUを使用して3D図形の描画などを高速に行うことができるAPI。
WebGLのAPIはCanvas以上に人間が扱うものではないため、これも適当なライブラリを使うのがよい。
フォールバックとしてただのCanvasにも描画できる用に設計されているものが多い。