解説
HTML5の「Canvas」は、HTML5で導入された要素で、JavaScriptにより各種描画を行えます。
Canvasに描画を行う際は、描画の実体であるコンテクストを取りだして、そのコンテクストに対して描画を行っていきます。コンテクストには、CanvasRenderingContext2DとWebGLの2種類が用意されています。
CanvasRenderingContext2Dは、2次元描画用のコンテクストです。パスを指定して、線描画や塗り潰しを行っていきます。また、画像を描画することも行えます。さらに、描画領域の画素を直接取り出したり、書き換えたりすることも可能です。
WebGLは、Web Graphics Libraryの略で。主に3次元描画用のコンテクストです。2次元描画も行えます。こちらは、GPUを利用して高速に描画可能ですが、画素に直接アクセスするような使い方は想定されていません。WebGLは、処理を書くコードが複雑で長大になります。そのため、ライブラリを導入して使用されることが多いです。
Canvasを利用することで、グラフや図を動的に挿入したり、アニメーションを行ったり、インタラクティブに描画を行ったりすることができます。
サンプル
JavaScriptのプログラムを掲載します。ファイルはUTF-8で保存してください。検証はGoogle Chromeで行なっています。WebGLのサンプルは、three.jsを利用しています。
<html>
<head>
<title>「JavaScript」のサンプル</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Cnavas1 - CanvasRenderingContext2D</h1>
<canvas id="cnvs1" width="480" height="320"></canvas>
<script>
// 初期化
var cnvs = document.getElementById('cnvs1');
var w = cnvs.width;
var h = cnvs.height;
var cntxt = cnvs.getContext('2d');
// 塗り潰し
cntxt.fillStyle = '#ff0';
cntxt.fillRect(0, 0, w, h);
// 線描画
cntxt.strokeStyle = '#088';
cntxt.strokeRect(w * 0.1, h * 0.1, w * 0.8, h * 0.8);
</script>
<h1>Cnavas2 - WebGL</h1>
<div id="wrap"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/91/three.min.js">
</script>
<script>
// 初期化
var w = 480;
var h = 320;
var camera = new THREE.PerspectiveCamera(45, w / h, 1, 1000);
camera.position.z = 600;
scene = new THREE.Scene();
// テクスチャ
var cnvs = document.getElementById('cnvs1');
var texture = new THREE.Texture(cnvs);
texture.needsUpdate = true;
// メッシュを作ってシーンに追加
var size = 300;
var geometry = new THREE.BoxBufferGeometry(size, size, size);
var material = new THREE.MeshBasicMaterial({map: texture});
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
// 描画準備
var renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize(w, h);
document.getElementById('wrap').appendChild(renderer.domElement);
// アニメーション描画
setInterval(function() {
mesh.rotation.x += 0.04;
mesh.rotation.y += 0.03;
renderer.render(scene, camera);
}, 50);
</script>
</body>
</html>
