WebGL-Html5キャンバスの概要

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

HTML5キャンバス

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

これは簡単です <canvas> 2つの特定の属性のみを持つ要素 width そして height さらに、id、name、classなどのすべてのコアHTML-5属性。

構文

HTMLキャンバスタグの構文を以下に示します。キャンバスの名前を二重引用符（“”）で囲む必要があります。

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

キャンバス属性

キャンバスタグには、id、width、heightの3つの属性があります。

Id− idは、Document Object Model（DOM）のcanvas要素の識別子を表します。
Width −幅はキャンバスの幅を表します。
Height −高さはキャンバスの高さを表します。

これらの属性は、キャンバスのサイズを決定します。プログラマーが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>は最初は空白です。キャンバス要素に何かを表示するには、スクリプト言語を使用する必要があります。このスクリプト言語は、レンダリングコンテキストにアクセスし、それを利用する必要があります。

キャンバス要素には、と呼ばれるDOMメソッドがあります getContext()、レンダリングコンテキストとその描画関数を取得するために使用されます。このメソッドは、コンテキストのタイプという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 Tutorialspoint', 70, 70);
      </script>
   </body>
</html>

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

HTML-5 2D Canvasのその他の例については、次のリンクHTML- 5Canvasを確認してください。

WebGLコンテキスト

HTML5 Canvasは、WebGLアプリケーションの作成にも使用されます。キャンバス要素にWebGLレンダリングコンテキストを作成するには、文字列を渡す必要がありますexperimental-webgl、の代わりに 2d に canvas.getContext()方法。一部のブラウザは 'のみをサポートします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>

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