ホーム>Web デザインのチュートリアル>HTMLチュートリアル

HTML5キャンバス要素詳細チュートリアル1

著者：Eve Cole 更新時間：2025-04-05 11:00:03
HTML5キャンバス要素詳細チュートリアル1：基本的な使用法。

<canvas>は、HTML5のまったく新しい要素であり、JavaScriptがグラフィックを描画するために使用できます。最初に、<canvas>は、Safariに適用されたAppleのMac OS Xダッシュボードに導入され、次にFirefoxブラウザーなどのこの新しい要素もサポートするGecko1.8ブラウザーに基づいています。今日、<canvas>要素はHTML5標準仕様の一部です。

このチュートリアルを通じて<canvas>ができることを説明し、アプリケーション<canvas>の出発点として使用できます。学習<canvas>要素は難しくありません。 HTMLとJavaScriptの基本的な知識、およびFirefoxブラウザー、Safari最新バージョン、またはOpera9+のみが必要なだけで、すべての例の効果を確認できるようにする必要があります。

次に、<canvas>要素を定義する方法から始めましょう。

<キャンバスID =チュートリアル幅= 150高さ= 150> </canvas>

<canvas>要素には、幅と高さの2つの属性のみがあり、オプションであり、DOMまたはCSSを使用して制御できます。幅と高さが設定されていない場合、デフォルトの幅は300ピクセル、高さ150ピクセルが使用されます。 <canvas>のサイズはCSSを介して制御および調整できますが、レンダリングされた画像を拡張してレイアウトに適応します。レンダリング結果が変形しているように見えることがわかったら、CSSに依存する必要はありません。 <canvas>に表示される幅と高さの値を指定できます。標準のHTMLタグと同様に、ID属性も定義することができ、スクリプトアプリケーションをより便利にすることができます。 <canvas>要素は、通常の画像のように、そのスタイル（マージン、境界、背景など）を指定できます。ただし、これらのスタイルは、キャンバスによって生成された実際の画像に影響を与えません。

この要素は比較的新しいため、すべてのブラウザがそれをサポートしているわけではないため、正常に閲覧できない人に代替の表示情報を提供する必要があります。テキストや写真を使用できます。

  1.  <canvasid = stockgraphwidth = 150height = 150>
  2. ブラウザは<canvas>要素をサポートしていません。
  3.  </canvas>
  4.  <canvasid = clockwidth = 150height = 150>
  5.  <imgsrc = images.pngwidth = 150height = 150alt = epplace image/
  6.  </canvas>

Apple Safariでは、<canvas>の実装は<img>に非常に似ており、エンドタグはありません。ただし、<canvas>がWebの世界で広く適用できるようにするには、代替コンテンツに滞在する場所を提供する必要があるため、Mozillaの実装でタグ（</canvas>）を終了する必要があります。 <canvas id = foo ...> </canvas>はSafariとMozillaと完全に互換性があります - Safariは単に終了タグを無視します。代替コンテンツがある場合は、いくつかのCSSトリックを使用して、Safariの代替コンテンツのみを非表示にすることができます。これらの代替コンテンツはIEで表示する必要がありますが、Safariでは表示されません。

<canvas>は、表示するものを制御できる1つ以上のレンダリングコンテキストを備えた固定サイズの図面画面を作成します。現在の唯一のオプションでもある2Dレンダリングに焦点を当てています。将来、OpenGL ESに基づいて3Dレンダリングを追加する場合があります。

  1.  varcanvas = document.getElementById（ 'Tutorial'）;
  2.  varctx = canvas.getContext（ '2d'）;

上記のコードを説明しましょう。 <canvas>の初期化は空白です。スクリプトを描画するには、最初にコンテキストをレンダリングする必要があります。 Canvas ElementオブジェクトのgetContextメソッドを介して取得できます。同時に、描画のために呼び出される必要があるいくつかの関数も取得されます。 getContext（）は、そのタイプを引数として説明する値を受け入れます。上記の最初の行は、getElementByIDメソッドを介してキャンバスオブジェクトのDOMノードを取得します。次に、getContextメソッドを使用して、描画操作コンテキストを取得します。さらに、スクリプトを使用して、<canvas>のブラウザのサポート、つまりgetContextが存在するかどうかを判断することもできます。

  1.  varcanvas = document.getElementById（ 'Tutorial'）;
  2.  if（canvas.getContext）{
  3.  varctx = canvas.getContext（ '2d'）;
  4.  // DrawingCodeHere
  5.  }それ以外{
  6.  // canvas-unsupportedcodehere
  7.  }

以下の最もシンプルなテンプレートから始めて、それらをローカルバックアップにコピーできます。

  1.  <html>
  2.  <head>
  3.  <title> canvastutorial </title>
  4.  <scriptType = text/javascript>
  5.  functiondraw（）{
  6.  varcanvas = document.getElementById（ 'Tutorial'）;
  7.  if（canvas.getContext）{
  8.  varctx = canvas.getContext（ '2d'）;
  9.  }
  10.  }
  11.  </script>
  12.  <styletype = text/css>
  13.  Canvas {border：1pxsolidblack;}
  14.  </style>
  15.  </head>
  16.  <bodyonload = draw（）;>
  17.  <canvasid = tutorialwidth = 150height = 150> </canvas>
  18.  </body>
  19.  </html>

慎重に、ページがロードされた後に1回（ボディタグのオンロードプロパティを設定することにより）実行されるdrawという関数があり、もちろん、Settimeout、SetInterval、またはその他のイベント処理機能でも呼ばれます。

まず、簡単に見てみましょう - 2つのインターレースの長方形を描画します。そのうちの1つはアルファ透明な効果があります。次の例で、それがどのように機能するかを詳細に見てみましょう。

  1.  <html>
  2.  <head>
  3.  <scriptType = application/x-javascript>
  4.  functiondraw（）{
  5.  varcanvas = document.getElementById（canvas）;
  6.  if（canvas.getContext）{
  7.  varctx = canvas.getContext（2d）;
  8.  ctx.fillstyle = rgb（200,0,0）;
  9.  ctx.fillrect（10,10,55,50）;
  10.  ctx.fillstyle = rgba（0,0,200,0.5）;
  11.  ctx.fillrect（30,30,55,50）;
  12.  }
  13.  }
  14.  </script>
  15.  </head>
  16.  <bodyonload = draw（）;>
  17.  <canvasid = canvaswidth = 150height = 150> </canvas>
  18.  </body>
  19.  </html>

上記のコードをHTMLファイルにコピーして実行できます。レンダリング：

関連記事