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

HTMLのスクリプトでグラフィックを作成する方法を徹底解説【canvasタグの使い方】

スクリプトを使ってグラフィックを作成したい場合は、HTMLの<canvas>タグを使用します。<canvas>タグは、JavaScriptなどのスクリプトによって図形・グラフィック・アニメーションなどを自由に描画できる専用の領域を定義する要素です。

<canvas>タグの主な属性

<canvas>タグでは、以下の2つの属性を使ってキャンバスのサイズを指定できます。

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

使用例：canvasで図形を描いてみよう

次のコードは、<canvas>タグを実装し、水色の四角形を描画するシンプルな例です。ファイルに保存してブラウザで開けば、実際の表示を確認できます。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Canvas Tag</title>
   </head>
   <body>
      <canvas id = "newCanvas">お使いのブラウザはcanvasタグに対応していません。</canvas>
      <script>
         var c = document.getElementById('newCanvas');
         var ctx = c.getContext('2d');
         ctx.fillStyle = '#00AEEF';
         ctx.fillRect(0,0,180,50);
      </script>
   </body>
</html>

コードのポイント

  • getElementById()：id属性「newCanvas」を持つcanvas要素を取得します。
  • getContext('2d')：2D描画用のコンテキストオブジェクトを取得します。図形の描画はこのオブジェクトを通じて行います。
  • fillStyle：塗りつぶす色を指定します。カラーコード「#00AEEF」（水色）を設定しています。
  • fillRect(x, y, width, height)：指定した座標を起点として、指定サイズの四角形（矩形）を描画します。ここでは左上原点から幅180px、高さ50pxの四角形を描いています。

なお、<canvas>タグの開始タグと終了タグの間に記述したテキストは、ブラウザがcanvasに対応していない場合に表示される代替テキストとして機能します。

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

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

  2. AutoHotkeyでアプリ固有のホットキーを作成する方法｜キーボード操作を自由にカスタマイズ

    似たようなアプリなのに、同じ操作をするのに異なるキーの組み合わせを使わなければならないのは、イライラしませんか?さらに悪いことに、ソフトウェアが分かりにくいショートカットキーを使い続け、再マップするオプションすら用意していないこともあります。すべてのアプリケーションでキーボードの動作を完全にコントロールできたら素晴らしいと思いませんか?実は、AutoHotkeyを使えばそれが可能なのです。AutoHotkeyを使えば、キーボード全体を再マップしたり、カスタムショートカットを作成したりできます。それも「グローバル」に適用することも、アプリケーションごとに個別に設定することも可能です。さらに、同じ