WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > HTMLタグ・リファレンス > HTMLタグ一覧(ABC順) > <canvas>「スクリプトでグラフィックスを描く領域」

<canvas> 「スクリプトでグラフィックスを描く領域」[読み方:キャンバス]

<canvas>タグは、JavaScriptなどのスクリプト言語で図形を描く領域(エリア)を指定します。
<canvas>は領域を確保するだけで、スクリプト言語により図形を描く必要があります。

HTML規格HTML4.01HTML5
使用可否×
<canvas>は、HTML5で追加されたタグです
ブラウザ別の対応状況
下記サイトで確認できます。
「Can I use」(英語のサイトです)
広告

<canvas> の仕様

カテゴリー使用できる場所(親要素)コンテンツモデル(子要素)タグ省略
フローコンテンツ
フレージングコンテンツ
エンベディッドコンテンツ
エンベディッドコンテンツを子要素にもてる場所トランスペアレント不可

<canvas>の属性

【構文】
<canvas width="幅" height="高さ">
~canvasタグが使用できない場合のメッセージ~
</canvas>
属性意味値のサンプルなど
width="幅"キャンバスの幅(ピクセル値)「500」 (初期値:300)
height="値"キャンバスの高さ(ピクセル値)「200」 (初期値:150)
グローバル属性
  • accesskey
  • autocapitalize
  • autofocus
  • class
  • contenteditable
  • dir
  • draggable
  • enterkeyhint
  • hidden
  • id
  • inert
  • inputmode
  • is
  • itemid
  • itemprop
  • itemref
  • itemscope
  • itemtype
  • lang
  • nonce
  • popover
  • slot
  • spellcheck
  • style
  • tabindex
  • title
  • translate
  • writingsuggestions
イベント属性
ページTOP

<canvas>のサンプル

<canvas width="300" height="200" id="samp1"style="background-color:#eee;">
<p style="color: red;">使用中のブラウザがcanvasに対応していません</p>
</canvas>

<script type="text/javascript">
<!--
function canvasSample() {
var cnvs = document.getElementById('samp1'); //キャンバス取得
if (cnvs.getContext) {

var wct = cnvs.getContext('2d'); //コンテキスト取得

wct.strokeStyle = 'rgb(0, 0, 255)'; // 枠四角
wct.strokeRect(30,20,220,160);
wct.fillStyle = "rgb(255,0,0)"; // 赤四角
wct.fillRect (50, 40, 80, 60);
wct.fillStyle = "rgba(0, 255, 0, 0.5)"; // 緑四角
wct.fillRect (100, 70, 80, 60);
wct.fillStyle = "rgba(0, 0, 255, 0.5)"; // 青四角
wct.fillRect (150, 100, 80, 60);

}
}
canvasSample();
//-->
</script>

使用中のブラウザがcanvasに対応していません

ページTOP

留意事項

  • <canvas>タグだけでは領域確保のみで意味を成しません。通常はJavaScriptのContext(コンテキスト)を利用し図形を描きます。
  • <canvas>タグは、HTML5で追加されたタグのため、対応していないブラウザも多くあります。
    ただし、IE7,IE8なども対応していません。
ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン