HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML5のcanvasタグとは？グラフィック描画の基本と使い方を解説

HTML5で新たに導入された<canvas>タグは、JavaScriptなどのスクリプト言語を使って、図形・グラフ・アニメーションなどをWebページ上に直接描画するための要素です。画像ファイルに頼らず、動的でインタラクティブなグラフィック表現を実現できる点が大きな特徴です。

canvasタグの基本的な書き方

まずは、width属性とheight属性を指定したシンプルな<canvas>要素の例を見てみましょう。idやclassといったHTML5の共通属性も通常どおり組み合わせて使用できます。

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

canvasタグの主な属性

属性値説明
heightピクセル値キャンバスの高さを指定します。
widthピクセル値キャンバスの幅を指定します。

これらの属性を省略した場合、既定では幅300px・高さ150pxのキャンバスが生成されます。また、<canvas>タグ内にテキストを記述しておくと、canvasに対応していない古いブラウザでの代替表示（フォールバック）として機能します。

実践例：canvasで長方形を描画する

次のコードを実行すると、canvasを使って長方形を描画する方法を確認できます。ポイントとなるのは、canvas要素が持つDOMメソッドgetContext()です。このメソッドはレンダリングコンテキストとその描画関数を取得するもので、引数にはコンテキストの種類である「2d」を指定します。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Canvas Tag</title>
   </head>
   <body>
      <canvas id = "myCanvas" width = "300" height = "100"></canvas>
      <script>
         var c = document.getElementById('myCanvas');
         var ctx = c.getContext('2d');
         ctx.fillStyle = '#7cce2b';
         ctx.fillRect(0,0,300,100);
      </script>
   </body>
</html>

コードの解説

  • getElementById()：HTMLから対象のcanvas要素を取得します。
  • getContext('2d')：2D描画用のコンテキストオブジェクトを取得します。
  • fillStyle：塗りつぶしの色を指定します（例では緑系のカラーコード）。
  • fillRect(x, y, 幅, 高さ)：指定した座標を起点に、指定サイズの塗りつぶし長方形を描画します。

このように、<canvas>タグとJavaScriptを組み合わせることで、静的なHTMLだけでは実現できない柔軟なグラフィック描画が可能になります。チャートやゲーム、画像編集ツールなど、さまざまな用途に応用できるので、ぜひ基本を押さえておきましょう。

  1. GoJS（HTML5 Canvasライブラリ）を使ってダイアグラムやグラフを描画する方法

    GoJSは、インタラクティブなダイアグラムを実装するためのJavaScriptライブラリです。オープンソースとして提供されており、Webアプリケーションに図やグラフを追加したい場合に活用できます。このページでは、GoJSを使い始めるための基本ポイントを解説します。GoJSはモデル・ビュー（Model-View）アーキテクチャを採用しています。モデルには、ノードやリンクを記述するJavaScriptオブジェクトの配列が格納され、これらのデータを実際のNodeオブジェクトやLinkオブジェクトとして可視化する役割を、Diagram（ダイアグラム）がビューとして担います。GoJSでDiagramを構

  2. HTMLのcanvasタグとは？使い方とサンプルコードで学ぶ図形描画の基礎

    HTMLのcanvasタグとは HTMLの<canvas>タグは、Webページ上にグラフィックを描画するための要素です。canvas自体は描画領域を確保するだけのため、実際に図形やアニメーションを描くにはJavaScriptなどのスクリプト言語と組み合わせて使用します。このタグはHTML5で新たに導入され、チャートの表示やゲーム開発、画像処理など、さまざまな場面で活用されています。 canvas要素には、描画領域のサイズを指定するための2つの属性があります。 height − キャンバスの高さ（ピクセル単位） width − キャンバスの幅（ピクセル単位） それでは、HTMLで