VIDEO LESSON

HTMLのcanvasタグとは？属性・使い方・ブラウザー互換性と活用例の解説動画

再生時間 7:39動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00エイチティーエムエルリファレンス解説です。
0:03エイチティーエムエルタグ編の九十八本目は、キャンバスタグです。
0:07キャンバスは、ジャバスクリプトなどを使って、図形やグラフを描くための領域を作る要素です。
0:13タグを置いただけでは白いキャンバスのような空の場所ができるだけで、絵そのものはプログラムが描きます。
0:20今回は、キャンバスの意味、幅と高さを決める属性、描画を始める合図となるゲットコンテキストの基本、
0:25代替コンテンツ、コード例、ブラウザー互換性、そしてよくある間違いまで順番に確認します。
0:31グラフが画面に現れるまでの流れを、自分の手で再現できるようになることが、
0:34今回のゴールです。
0:37まず、キャンバスの役割を整理します。
0:40普通の画像要素が、すでに用意された写真やイラストを表示するのに対して、キャンバスは、
0:45これから描くための場所を用意する要素です。
0:50たとえば、利用者の操作やデータの変化に合わせて棒グラフを伸ばしたり、図形を動かしたり、
0:55簡単なゲームの画面を作ったりできます。
1:00数字が変わるたびに画像ファイルを作り直す必要はなく、プログラムがその場で描き直せます。
1:07逆に、内容が決まっている写真なら画像要素の方が向いています。
1:11描く場所と、描かれる内容を分けて考えるのが、キャンバス理解の出発点です。
1:17マウスで描くお絵描きツールや、地図のように操作で表示が変わる画面も、キャンバスの応用としてよく知られています。
1:26基本の書き方を見ていきます。
1:28キャンバスは空要素ではないので、開始タグと終了タグをセットで書きます。
1:34その間に書く内容については、あとで代替コンテンツとして改めて説明します。
1:39配置する場所は、本文を表示するボディの中の、グラフや図を表示したい位置です。
1:46さらに、アイディーを付けておくと、ジャバスクリプトから、そのキャンバスを正確に探し出せます。
1:53まずはタグで場所を作り、次にプログラムがその場所を受け取って描く、という二段階の流れを覚えてください。
2:01この順番が分かると、コード例も読みやすくなります。
2:05キャンバス専用といえる大切な属性が、幅を表すウィドスと、高さを表すハイトです。
2:12何も指定しない場合、幅は三百、高さは百五十が既定値になります。
2:17ここで注意したいのは、この二つの属性が決めるのは、見た目の表示サイズだけではなく、
2:22内部で描画できる細かさ、つまり解像度だという点です。
2:28シーエスエスだけで表示を大きく引き伸ばすと、内部の絵が拡大されて、線や文字がぼやけて見えることがあります。
2:36描きたい大きさに合わせて、属性で土台の解像度を決め、表示サイズは必要に応じてシーエスエスで調整する、
2:41と分けて考えましょう。
2:46描画を始める基本の流れを紹介します。
2:49ジャバスクリプトでは、まずクエリーセレクターなどでキャンバス要素を取り出し、
2:54次にゲットコンテキストという命令で、描画に使う道具を受け取ります。
2:59引数にトゥーディーと渡すと、平面の図形を描くための道具が返ります。
3:03その道具に対して、フィルスタイルで塗る色を指定し、フィルレクトで四角形を描く、
3:07といった命令を順に書いていきます。
3:11エイチティーエムエル側は場所の用意までで、色や形の命令はすべてジャバスクリプト側に書く点が、
3:16キャンバスならではの特徴です。
3:20記事の活用事例をもとに、全体のコード例を確認します。
3:24場面は、動的なグラフの描画領域を作ることです。
3:28キャンバスには、チャートというアイディーと、幅三百二十、高さ百六十を指定し、
3:33中には参加者数の内訳を代替テキストとして書いています。
3:38続くスクリプトでは、そのキャンバスからトゥーディーの描画道具を受け取り、
3:45濃い緑色で、横位置二十、縦位置二十から、幅二百四十、高さ四十の四角形を描いています。
3:51保存してブラウザーで再読み込みし、緑色の帯が表示されるかを確認してください。
3:57まずはこの最小の成功体験から始めるのがおすすめです。
4:02コードを写すときは、キャンバスのアイディーと、スクリプトで探す名前が一致しているかも合わせて確認してください。
4:10代替コンテンツについて説明します。
4:13キャンバスの開始タグと終了タグの間に書いた文章は、キャンバスに対応していない環境や、
4:18ジャバスクリプトが動かず描画できない場合に、代わりに表示される内容になります。
4:24記事の例では、参加者数はエイチティーエムエルが十二人、シーエスエスが八人、
4:28というように、グラフが伝える数字そのものが文章で書かれています。
4:33大切なのは、描かれた図の中身は、プログラムが描いた絵としてしか存在せず、
4:37読み上げソフトなどにはそのまま伝わらない点です。
4:41図の意味は、代替内容や周囲の説明文でも必ず伝えるようにしましょう。
4:45見た目の整え方も見ておきます。
4:48キャンバス自体は、ほかの要素と同じようにシーエスエスで装飾できます。
4:54たとえば、細い枠線を付けて描画範囲がどこまでか分かるようにしたり、背景色を付けたりできます。
5:02ただし、繰り返しになりますが、シーエスエスで表示幅だけを大きく変えると、
5:08内部の解像度との釣り合いが崩れて、絵がぼやけることがあります。
5:14小さい画面に収めるための縮小は比較的問題になりにくい一方、拡大する場合は、
5:19属性の数値そのものを見直すことも検討してください。
5:25表示サイズと解像度は別物、という意識が失敗を防ぎます。
5:29似た用途の要素との使い分けも整理します。
5:32すでにファイルとして用意された写真やイラストを表示するなら、画像要素が素直な選択です。
5:39拡大しても線がきれいに保たれる図形やロゴなら、ベクター形式で描けるエスブイジーも候補になります。
5:46一方、キャンバスが得意なのは、データに応じてその場で描き直すグラフ、動き続けるアニメーション、
5:52利用者の操作で絵が変わるお絵描きのような場面です。
5:57決まった絵を見せるのか、プログラムで描き続けるのか。
6:01この違いで選ぶと、迷いにくくなります。
6:04用途に合った要素選びが、保守しやすいページにつながります。
6:08迷ったときは、その絵がページを開くたびに変わる必要があるかどうかを自問すると、
6:12判断しやすくなります。
6:16ブラウザー互換性を確認します。
6:18記事が紹介するエムディーエヌのデータでは、キャンバス要素本体は、クロームが一以降、
6:24エッジが十二以降、ファイアフォックスが一点五以降、サファリが二以降で対応しています。
6:30ファイアフォックスとサファリには補足条件ありとされているため、細かな動作は出典の注記も確認してください。
6:38とはいえ、かなり古くから主要ブラウザーで広く使われてきた仕組みなので、現在の環境では基本的に安心して使えます。
6:46ただし、使う描画機能やモバイル環境によって差が出ることもあるため、対象の実機で試す習慣は大切です。
6:54まとめとして、よくある間違いを三つ挙げます。
6:57一つ目は、キャンバスタグを置けば自動で絵が出ると思ってしまうことです。
7:02描画にはジャバスクリプトの命令が必ず必要です。
7:06二つ目は、幅や高さをシーエスエスだけで大きく引き伸ばし、絵をぼやけさせてしまうことです。
7:12解像度は属性で決めることを思い出してください。
7:15三つ目は、代替コンテンツを空っぽにして、図の意味が絵の中にしか残らないことです。
7:21キャンバスは、ジャバスクリプトで描画する領域です。
7:25これでキャンバスタグの解説を終わります。
7:28まずは四角形を一つ描く練習から始めてみてください。
7:32小さな成功を積み重ねることで、グラフやアニメーションへの応用も、少しずつ手が届くようになります。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

canvasタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。JavaScriptなどで描画する領域。図の意味は代替内容や周囲の説明でも伝えます。

解説記事・サンプルコードを読む：HTMLのcanvasタグとは？属性・使い方・ブラウザー互換性と活用例 →