canvas要素の基本
canvas要素はその名の通り、キャンバスのようにグラフィックを描画するための要素です。
たとえば、img要素のようにcanvas要素内で画像情報を読み込んで画像を表示させたり、線や図形を描画して表示させたり…といったことができます。
いずれにしても、HTML/CSSだけで描画・表示させることは不可能で、プログラム（JavaScript）の力を借りる必要があるのが大きな特徴です。
下はHTML/CSSだけでcanvas要素を配置、スタイル調整したものです。
CSSで調整した境界線（border）と背景色（background-color）は表示されていますが、他には何も表示されていないことが確認できます。
HTML
<canvas width="300" height="200">
キャンバスの表示内容を説明する代替テキスト
</canvas>
CSS
canvas {
border: solid black 3px;
background-color: lightblue;
}
表示結果
この何も描画されていないcanvas要素に、たとえば読み込ませた画像を描画するには以下のようなJavaScriptプログラムを挿入する必要があります。
JavaScript
window.onload = ()=>{
const canvas = document.querySelector('canvas');
const context = canvas.getContext('2d');
//画像の読み込み
const canvasImage = new Image();
canvasImage.src = 'img/canvas-img.webp'; //画像のファイルパス
canvasImage.onload = () => {
context.drawImage(canvasImage, 0, 0, 300, 200);
};
};
表示結果
また、下のように円や四角形などのシェイプ（図形）を描画することも可能です。
JavaScript
window.onload = ()=>{
const canvas = document.querySelector('canvas');
const context = canvas.getContext('2d');
//円の色と線の太さ
context.fillStyle = 'white';
context.strokeStyle = 'red';
context.lineWidth = 8;
//円を描画
context.arc(180,100,50,0 * Math.PI / 180, 360 * Math.PI / 180, false );
context.fill();
context.stroke();
//四角形の色と線の太さ
context.fillStyle = 'blue';
context.strokeStyle = 'yellow';
context.lineWidth = 4;
//四角形を描画
context.fillRect(20,30,80,50);
context.strokeRect(20,30,80,50);
};
表示結果
本記事はJavaScriptの解説が目的ではないので、プログラムの内容についてはここでは触れません。
とりあえずここでは、canvas要素＝JavaScriptでなんかいろいろ表現できるモノというざっくりとした理解で大丈夫です。
canvas要素の描画について詳しく知りたい方は、MDN Web DocsのCanvasチュートリアルページが参考になります。
MDN Web Docs Canvasチュートリアル
https://developer.mozilla.org/ja/docs/Web/API/Canvas_API/Tutorial
しかしここで疑問が生じます。
単に画像を表示させるだけなら何もcanvas要素である必要はなく、img要素を使えばよい話です。
図形の描画にしても、Illustratorやペイントソフトで図形を描いて画像として書き出せば、やはりimg要素で表示可能です。
となれば、canvas要素って別に使いどころがなさそうな気がしてきますよね。
しかし、中にはcanvas要素でなければ難しいこともあるんです。
次の章では、canvas要素でなければ表現が難しい（HTML/CSS、jQueryなどのライブラリだけでは実装困難な）ケースについて簡単にご紹介します。
POINT!
- ・canvas要素はHTML/CSSだけでは意味をなさない！
- ・JavaScriptを使って画像や図形などの描画ができる！
- ・単に画像を表示させるだけならimg要素で良いが、canvas要素でなければ表現できないことも！
canvas要素が必要となる場面
単純に画像や図形を描画するだけであればimg要素による画像の表示で十分であり、正直に言ってcanvas要素の出番はありません。
しかし、描画だけではなく描画したオブジェクトに何らかの機能を持たせたり、複雑にアニメーションさせたい場合は、canvas要素が活躍します。
たとえば、下のサンプルを例にかんがえてみましょう。
青い丸のオブジェクトをクリックすると右に向かって動き出し、オレンジ色の壁にぶつかると止まるというアニメーションを設定しています。
アニメーション自体は非常にシンプルなので、CSSだけでも実装可能に思えます。
ですが、シンプルに見えてオブジェクトには下のような機能を持たせています。
- １）クリックでアニメーションをスタートさせる
- ２）オレンジ色の壁にぶつかったかどうかを判定し、アニメーションを停止させる
こういった処理を伴うアニメーションは、CSSのみのアニメーションではできません。
サンプルのような機能とアニメーションをもっと作り込んで複雑にすると、たとえばブロック崩しのようなブラウザゲームを作ることもできます。
ゲームほど複雑なものまでいかなくとも、マウスカーソルの移動やスワイプなど、ユーザーのアクションに反応するインタラクティブなアニメーションを作成したい場合は、canvas要素の活用が必要となるケースが多いです。
単に複雑なアニメーションを見せたいということだけであれば、動画編集ソフトを使ってMP4などの動画として書き出し、Webページに動画として埋め込むという手も使えます。
しかし、動画ファイルでは再生や一時停止ぐらいしかユーザーに選択肢が与えられないため、その他のユーザーアクションに反応するアニメーションを実装したい場合は不可です。
なので、canvas要素が必要となる＝インタラクティブなアニメーションを実装したい場合という認識を持っていれば基本的に問題はないかと思います。
ただし、インタラクティブなアニメーションといっても比較的シンプルなカルーセルや画像スライダーぐらいであれば、canvas要素を使わずにJavaScriptのみ（jQueryなど）でも容易に実装可能です。
canvas要素は、多くのWebサイトに実装されている画像スライダーのような一般的なWebパーツというよりも、ブラウザゲームやHTML5バナーなどやや特殊なものを作りたい場合に活躍することが多いです。
POINT!
- ・canvas要素は、描画オブジェクトに機能を持たせたりアニメーションさせたりしたい場合に活躍する！
- ・たとえばブロック崩しのようなブラウザゲームも作れる！
- ・基本的に、インタラクティブなアニメーション＝canvas要素という認識でOK！
Web制作初心者×canvas要素
これからWeb制作の学習を始めようと考えている方やWeb制作初心者の方の場合、canvas要素の学習は後回しで良いと筆者は考えます。
初学者や初心者の場合、まずはcanvasなど特殊なものを除いたHTMLとCSSの基礎をマスターすることに集中した方が良いです。
というのも、比較的学習が容易だと言われるHTML/CSSですが実はこれらの学習はとても奥深く、一朝一夕でマスターできるものではありません。
中途半端な状態で下手にあれこれ手を出すよりも、まずは土台となる基礎を確実にしてからcanvas要素などの応用に取り組んだ方が、スムーズに理解が進むでしょう。
また、一般的なWebサイトであればcanvas要素を全く使わずに作成することも十分に可能です。
学習を進めて中級者以上の立場になっても、canvas要素を使ったインタラクティブアニメーションに特に興味を持てず、学習の必要も感じないということであれば、とりあえずスルーしておくという選択もありです。
その分、デザインの方面に興味があればPhotoshopやFigmaなどのデザインツールの勉強に時間を費やしたり、プログラミングの方面に興味があればPHPなどバックエンドの言語を学んだりするのも良い選択ではないかと思います。
Web制作と言ってもその分野は非常に幅広いので、一人で全てをマスターするのは現実的ではありません。
HTML/CSSの基礎を一通り身につけた後は、デザイン、フロントエンド、バックエンドなど、自分が極めたい専門分野を絞ってスペシャリストを目指した方が良いと思います。
そして専門分野を絞った結果、canvas要素の学習は必要ないということであれば、無理して学習を進める必要はありません。
POINT!
- ・初学者の場合、まずはHTML/CSSの基礎をマスターすることに集中しよう！
- ・学習の必要性を感じるまでとりあえずスルーでもOK！
- ・中級者になったら専門分野を絞ってスペシャリストを目指そう！
Webデザイナー×canvas要素
Webデザイナーに関しても、canvas要素のマスターは必須というわけではありません。
前章でも述べた通り、一般的なWebサイトであればcanvas要素を使う必要が全くないケースも多く、canvas要素をマスターしていないからといってWebサイトをデザインする上で特に困るようなことはありません。
また、canvas要素を扱うためにはJavaScriptの基礎〜やや応用まで必要になるため、デザイナーが学ぶには学習コストがやや高めと言えます。
そういった意味でもデザイナーが無理をしてまでcanvas要素（とそれに伴うJavaScript）をマスターする必要性は薄いかと思います。
ただし、今後canvas要素を活用したHTML5バナーをデザイン〜実装までこなせるようになりたい場合は、canvas要素を習得するメリットは大きいです。
canvas要素を活用することで、自由度の高いインタラクティブなバナーをデザインすることが可能になります。
規模が大きくなりがちなWebサイト制作ではデザインとコーディングで担当者を分けることも多いですが、規模の小さなバナー制作においては、デザイナーが一人で対応できた方が効率が良くなります。
これまでは、バナーデザインと言えば静止画像のバナーを作れればそれで良かったのですが、バナーも日々進化・変化しています。
これからは、静止画のバナーデザインができるというだけでは時代の流れについていけなくなるかもしれません。
もちろん、複雑な機能・アニメーションを含むHTML5バナーまでデザイナーが一人で作れるようになる必要はありません。
時にはWebサイト制作と同じように、デザイナーとエンジニアがタッグを組んで制作する必要があるでしょう。
しかしそのような場合でも、デザイナーがcanvas要素やそれに伴うJavaScriptの基礎を理解していると、エンジニアとのコミュニケーションを円滑に取ることができるようになります。
canvas要素を活かしたバナーやWebサイトをデザインしたいと考えている場合は、基礎の部分だけでも良いので学習しておくと良いかもしれません。
POINT!
- ・Webサイトをデザインする上でも、canvas要素のマスターは必須ではない！
- ・canvas要素の学習にはJavaScriptもついてくるので、学習コストはやや高め！
- ・canvas要素を活用したHTML5バナーをデザインから実装までできるようになりたい場合は学ぶ価値あり！
- 注目の人気記事 -
