canvas 要素 （HTMLタグ）

HTMLのcanvas要素の説明です。canvas要素は、スクリプトによって描画されるビットマップのグラフィックを定義する要素です。

---

目次

1. 要素の記述例
   • 閲覧中ブラウザーでの表示結果
2. 要素の説明
3. 利用できる属性
   • グローバル属性
   • イベントハンドラ属性
4. ブラウザデフォルトCSS設定
   • Google Chromeの場合

要素の記述例

<canvas id="square" width="148" height="148"></canvas>
<script>
  window.onload = function () {
    const canvas = document.getElementById("square")
    if (canvas.getContext) {
      const context = canvas.getContext("2d");
      context.fillStyle = "rgb(150, 199, 119)";
      context.fillRect(24, 24, 100, 100);
      context.fillStyle = "rgba(198, 75, 191, 0.5)";
      context.fillRect(48, 48, 100, 100);
    }
  }
</script>

 

閲覧中ブラウザーでの表示結果

 

要素の説明

• canvas要素は、スクリプトによって描画されるビットマップのグラフィックを定義する要素です。
• canvas要素の要素内容には、canvas要素未対応の場合に表示する内容を定義します。

 

利用できる属性

canvas要素で利用できる属性

属性名	属性の説明
height	要素の高さを定義する属性です。
width	要素の幅を定義する属性です。

グローバル属性

HTMLのすべての要素はグローバル属性が利用できます。グローバル属性の一覧については「グローバル属性」を参照してください。

イベントハンドラ属性

canvas要素がサポートするイベントハンドラ属性については「イベントハンドラ属性」を参照してください。

ブラウザデフォルトCSS設定

Google Chromeの場合

ブラウザデフォルトCSS設定はありません。