CodeZine(コードジン)

特集ページ一覧

「HTML5のCanvas」
~マンガでプログラミング用語解説

マンガで分かるプログラミング用語辞典(134)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2018/07/03 14:00

解説

 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>
出力結果
出力結果
フィードバックお待ちしております!

 ご感想、解説して欲しい用語、解説内容のアドバイスなどございましたら、FacebookTwitterなどでお気軽に編集部までお寄せください。よろしくお願いいたします。



  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:マンガで分かるプログラミング用語辞典

もっと読む

著者プロフィール

  • 柳井 政和(ヤナイ マサカズ)

    クロノス・クラウン合同会社 代表社員 http://crocro.com/ オンラインソフトを多数公開。 プログラムを書いたり、ゲームを作ったり、記事を執筆したり、マンガを描いたり、小説を書いたりしています。 「めもりーくりーなー」でオンラインソフト大賞に入賞。最近は、小説家デビューして小説...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5