HTML5-キャンバス

HTML5要素<canvas>を使用すると、JavaScriptを使用してグラフィックスを簡単かつ強力に描画できます。グラフの描画、写真の合成、または単純な（それほど単純ではない）アニメーションの作成に使用できます。

これは、2つの特定の属性 width および height に加えて、id、name、classなどのすべてのコアHTML5属性を含む単純な<canvas>要素です。

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

次のように_getElementById（）_メソッドを使用して、DOMで<canvas>要素を簡単に見つけることができます-

var canvas = document.getElementById("mycanvas");

HTML5ドキュメントで<canvas>要素を使用する簡単な例を見てみましょう。

<!DOCTYPE HTML>

<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メソッドがあり、レンダリングコンテキストとその描画関数を取得するために使用されます。この関数は、コンテキストのタイプ* 2d *という1つのパラメータを取ります。

以下は、ブラウザが<canvas>要素をサポートしているかどうかのチェックとともに、必要なコンテキストを取得するコードです-

var canvas  = document.getElementById("mycanvas");

if (canvas.getContext) {
   var ctx = canvas.getContext('2d');
  //drawing code here
} else {

  //canvas-unsupported code here
}

ブラウザのサポート

Firefox、Safari、Chrome、およびOperaの最新バージョンはすべてHTML5 Canvasをサポートしていますが、IE8はキャンバスをネイティブにサポートしていません。

ExplorerCanvasを使用して、Internet Explorerでキャンバスをサポートできます。次のようにこのJavaScriptを含めるだけです-

<!--[if IE]><script src = "excanvas.js"></script><![endif]-->

HTML5 Canvasの例

このチュートリアルでは、HTML5 <canvas>要素に関連する次の例を取り上げます。

Sr.No.	Examples & Description
1	Drawing Rectangles HTML5 <canvas>要素を使用して長方形を描画する方法を学ぶ
2	Drawing Paths HTML5 <canvas>要素のパスを使用して図形を作成する方法を学ぶ
3	Drawing Lines HTML5 <canvas>要素を使用して線を描く方法を学ぶ
4	Drawing Bezier HTML5 <canvas>要素を使用してベジェ曲線を描く方法を学ぶ
5	Drawing Quadratic HTML5 <canvas>要素を使用して2次曲線を描く方法を学ぶ
6	Using Images HTML5 <canvas>要素で画像を使用する方法を学ぶ
7	Create Gradients HTML5 <canvas>要素を使用してグラデーションを作成する方法を学ぶ
8	Styles and Colors HTML5 <canvas>要素を使用してスタイルと色を適用する方法を学ぶ
9	Text and Fonts さまざまなフォントとサイズを使用して素晴らしいテキストを描画する方法を学びます。
10	Pattern and Shadow さまざまなパターンを描き、影を落とす方法を学びます。
11	Canvas States キャンバスで複雑な描画をしながら、キャンバスの状態を保存および復元する方法を学びます。
12	Canvas Translation このメソッドは、キャンバスとその原点をグリッド内の別のポイントに移動するために使用されます。
13	Canvas Rotation このメソッドは、現在の原点を中心にキャンバスを回転させるために使用されます。
14	Canvas Scaling このメソッドは、キャンバスグリッドの単位を増減するために使用されます。
15	Canvas Transform これらのメソッドにより、変換マトリックスを直接変更できます。
16	Canvas Composition このメソッドは、特定の領域をマスクするか、キャンバスからセクションをクリアするために使用されます。
17	Canvas Animation HTML5キャンバスとJavaScriptを使用して基本的なアニメーションを作成する方法を学びます。

Html5-canvas

目次

HTML5-キャンバス

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

ブラウザのサポート

HTML5 Canvasの例