WebGL-Html5 Canvasの概要

Web上でグラフィカルアプリケーションを作成するために、HTML-5は、2D Canvas、WebGL、SVG、3D CSSトランスフォーム、SMILなどの豊富な機能セットを提供します。 WebGLアプリケーションを作成するには、HTML-5の既存のキャンバス要素を使用します。この章では、HTML-5 2Dキャンバス要素の概要を説明します。

HTML5 Canvas

HTML-5 <canvas> は、JavaScriptを使用してグラフィックを描画するための簡単で強力なオプションを提供します。グラフの描画、写真の合成、または単純な（それほど単純ではない）アニメーションの作成に使用できます。

これは、2つの特定の属性 width と height に加えて、id、name、classなどのすべてのコアHTML-5属性を持つ単純な <canvas> 要素です。

構文

HTMLキャンバスタグの構文は次のとおりです。二重引用符（ ""）内でキャンバスの名前を言及する必要があります。

<canvas id = "mycanvas" width = "100" height = "100"></canvas>

キャンバスの属性

canvasタグには、id、width、およびheightの3つの属性があります。

Id -Idは、_Document Object Model（DOM）_のキャンバス要素の識別子を表します。
幅-幅はキャンバスの幅を表します。
高さ-高さはキャンバスの高さを表します。

これらの属性は、キャンバスのサイズを決定します。プログラマーがcanvasタグの下でそれらを指定していない場合、Firefox、Chrome、Web Kitなどのブラウザーは、デフォルトでサイズ300×150のcanvas要素を提供します。

例-キャンバスを作成する

次のコードは、キャンバスを作成する方法を示しています。 CSSを使用して、キャンバスに色付きの境界線を付けました。

<html>
   <head>
      <style>
         #mycanvas{border:1px solid red;}
      </style>
   </head>
   <body>
      <canvas id = "mycanvas" width = "100" height = "100"></canvas>
   </body>
</html>

実行すると、上記のコードは次の出力を生成します-

レンダリングコンテキスト

<canvas>は最初は空白です。キャンバス要素に何かを表示するには、スクリプト言語を使用する必要があります。このスクリプト言語は、レンダリングコンテキストにアクセスして描画する必要があります。

canvas要素には、* getContext（）というDOMメソッドがあります。これは、レンダリングコンテキストとその描画関数を取得するために使用されます。このメソッドは、1つのパラメーター、コンテキストのタイプ *2d を取ります。

次のコードは、必要なコンテキストを取得するために記述されます。以下に示すように、このスクリプトをbodyタグ内に記述できます。

<!DOCTYPE HTML>
<html>
   <body>
      <canvas id = "mycanvas" width = "600" height = "200"></canvas>

      <script>
         var canvas = document.getElementById('mycanvas');
         var context = canvas.getContext('2d');

         context.font = '20pt Calibri';
         context.fillStyle = 'green';
         context.fillText('Welcome to finddevguides', 70, 70);
      </script>
   </body>
</html>

実行すると、上記のコードは次の出力を生成します-

HTML-5 2D Canvasの例については、次のリンクリンクを確認してください：/html5/html5_canvas [HTML-5 Canvas]。

WebGLコンテキスト

HTML5 Canvasは、WebGLアプリケーションの作成にも使用されます。 canvas要素でWebGLレンダリングコンテキストを作成するには、* canvas.getContext（）メソッドに *2d の代わりに文字列 experimental-webgl を渡す必要があります。一部のブラウザは「 webgl 」のみをサポートしています。

<!DOCTYPE html>
<html>
   <canvas id = 'my_canvas'></canvas>

   <script>
      var canvas = document.getElementById('my_canvas');
      var gl = canvas.getContext('experimental-webgl');
      gl.clearColor(0.9,0.9,0.8,1);
      gl.clear(gl.COLOR_BUFFER_BIT);
   </script>
</html>

実行すると、上記のコードは次の出力を生成します-

Webgl-html5-canvas-overview

目次

WebGL-Html5 Canvasの概要

HTML5 Canvas

構文

キャンバスの属性

例-キャンバスを作成する

レンダリングコンテキスト

WebGLコンテキスト