SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

解説

 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などでお気軽に編集部までお寄せください。よろしくお願いいたします。

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
マンガで分かるプログラミング用語辞典連載記事一覧

もっと読む

この記事の著者

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

クロノス・クラウン合同会社 代表社員http://crocro.com/オンラインソフトを多数公開。プログラムを書いたり、ゲームを作ったり、記事を執筆したり、マンガを描いたり、小説を書いたりしています。「めもりーくりーなー」でオンラインソフト大賞に入賞。最近は、小説家デビューして小説も書いています(『裏切りのプログラム』他)。面白いことなら何でもOKのさすらいの企画屋です。 

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/10826 2018/07/03 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング