HTML5-キャンバス

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

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

<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>は最初は空白であり、何かを表示するには、スクリプトは最初にレンダリングコンテキストにアクセスし、それを描画する必要があります。

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

以下は、ブラウザが<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を使用して、InternetExplorerを介してキャンバスをサポートできます。このJavaScriptを次のように含める必要があります-

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

HTML5キャンバスの例

このチュートリアルでは、HTML5 <canvas>要素に関連する次の例について説明します。

シニア番号	例と説明
1	長方形を描く HTML5の<canvas>要素を使用して長方形を描画する方法を学ぶ
2	パスの描画 HTML5 <canvas>要素のパスを使用してシェイプを作成する方法を学ぶ
3	線を引く HTML5の<canvas>要素を使用して線を引く方法を学ぶ
4	ベジェを描く HTML5 <canvas>要素を使用してベジェ曲線を描画する方法を学ぶ
5	二次の描画 HTML5の<canvas>要素を使用して2次曲線を描く方法を学ぶ
6	画像の使用 HTML5の<canvas>要素で画像を使用する方法を学ぶ
7	グラデーションを作成する HTML5の<canvas>要素を使用してグラデーションを作成する方法を学ぶ
8	スタイルと色 HTML5の<canvas>要素を使用してスタイルと色を適用する方法を学ぶ
9	テキストとフォントさまざまなフォントとそのサイズを使用してすばらしいテキストを描画する方法を学びます。
10	パターンと影さまざまなパターンを描き、影を落とす方法を学びます。
11	キャンバスの状態キャンバス上で複雑な描画を行いながら、キャンバスの状態を保存および復元する方法を学びます。
12	キャンバス翻訳このメソッドは、キャンバスとその原点をグリッド内の別のポイントに移動するために使用されます。
13	キャンバスの回転このメソッドは、現在の原点を中心にキャンバスを回転させるために使用されます。
14	キャンバススケーリングこの方法は、キャンバスグリッドの単位を増減するために使用されます。
15	キャンバス変換これらの方法では、変換行列を直接変更できます。
16	キャンバス構成この方法は、特定の領域をマスクしたり、キャンバスからセクションをクリアしたりするために使用されます。
17	キャンバスアニメーション HTML5キャンバスとJavaScriptを使用して基本的なアニメーションを作成する方法を学びます。