解説
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>