【HTML5】canvasタグとは？使い方についてまとめ

canvasに使える属性

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

よく使うグローバル属性

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

グローバル属性一覧はこちら

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

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

スポンサードサーチ

canvasの使い方

<html>
  <head>
    <title>サンプル</title>
    <style type="text/css">
        #sample {
            background: gray;
        }
    </style>
  </head>
  <body onload="draw();">
    <canvas id="sample" width="400" height="400"></canvas>
        <script type="text/javascript">
            function draw(){
                var canvas = document.getElementById('sample');
                if (canvas.getContext){
                    var ctx = canvas.getContext('2d');
                    ctx.fillRect(50,50,300,260);
                    ctx.clearRect(120,80,200,180);
                    ctx.strokeRect(180,20,180,180);
                }
            }
        </script>
  </body>
</html>

ブラウザ対応状況

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

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

canvasの概要

注意点

canvasのカテゴリー

コンテンツカテゴリー

コンテンツモデル

canvasに入れられるタグ一覧

タグ早見表

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

canvasに使える属性

よく使うグローバル属性

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

canvasの使い方

長方形を描画

ブラウザ対応状況