canvasの使い方についてまとめ

canvasの概要

canvasは図形を描画するためのキャンバスをサポートします。canvas要素内の領域にJavaScriptを用いて線や画像を表示します。

注意点

canvas要素のブロックの中で代替コンテンツを提供することが推奨されています(canvas非対応ブラウザやJavaScriptが無効のブラウザのため)。キャンバスの寸法はwidthおよびheight属性をcanvas要素に直接設定することが推奨されています。

canvasのカテゴリー

canvasに入れられるタグ一覧

タグ早見表

a audio canvas del ins map object video[子孫にインタラクティブコンテンツ(a button details embed iframe label select textarea)のうちa、img(usemap属性を持つ)、button、input(type属性がCheckbox、Radio Button、button)、select(multiple属性を持つ。または表示サイズが1よりも大きい)、インタラクティブコンテンツ(tabindex属性を持つ)を除く。]

入れられるタグのカテゴリー・モデル

canvasに使える属性

属性とは<canvas> タグ内に入れることのできるものです。属性をあてはめることにより、CSS・JavaScriptなどで操作する際に識別させることが可能になります。

よく使うグローバル属性

id 概要 要素に対してID固有の識別名を付けることができます。
属性の値 英字から始まる英数字
class 概要 要素に対して分類名を付けることができます。
属性の値 英字から始まる英数字
style 概要 要素に対して直接スタイルを指定することができます。
属性の値 スタイルシートのコード

canvasタグに使えるその他属性

height 概要 動画の表示領域の高さを指定します。
属性の値 ピクセル値(絶対値)で指定します。パーセント値は指定できません。
width 概要 動画の表示領域の横幅を指定します。
属性の値 ピクセル値(絶対値)で指定します。パーセント値は指定できません。

スポンサードサーチ

canvasの使い方



ブラウザ対応状況

ブラウザの対応(PC)
Chrome あり
Safari あり
Internet Explorer あり
Edge あり
Firefox あり
Opera あり
ブラウザの対応(SP)
Chrome あり
Safari あり
Samsung Internet あり

WORK REQUEST

CONTACT