知っておきたいHTMLのCanvasとは?何ができるのかを解説

HTMLで調べるとよくCanvasがでてくるけどどのような図が描けるの?
Canvasで図を描く方法を詳しく知りたい

HTML5とCanvasは調べているとよく出てくる内容で、疑問に思った初心者の方も多いのではないでしょうか。CanvasはHTML5とJavaScriptを組み合わせて図を描画できる機能です。

今回はHTMLCanvasとは何かについて、入門的な内容、すぐに試せる実践的な内容などをわかりやすく紹介していきます。

この記事では、以下の内容で解説していきます。

  • Canvasとは何か
  • Canvasに必要な知識とは
  • Canvasの使い方とは

HTMLのCanvasについて基本からやさしく解説していくのでぜひご覧ください。

Canvasとは

まずはCanvasとは何かについてを知っておきましょう。Canvasは、HTML5とJavaScriptを使ってブラウザ上で図を描くための仕様です。HTML5という現在主流になっているHTMLのバージョンでのみ、Canvasは使うことが出来ます。

ただし、Canvas単体ではアニメーションさせることは出来ないので、JavaScriptを使って描画と再描画を繰り替えす必要があります。また、CanvasはFlashを使わずに図を描画することが可能です。なおかつ外部に画像ファイルを用意しなくても良いというのが大きなメリットになります。

Canvasに必要な知識

それではCanvasについて学ぶために、どのような知識が必要になるのか見ていきましょう。

HTML5

CanvasはHTML5の仕様で動かすことが出来ます。描画したい内容をそのまま書くという訳ではありません。h1タグやpタグなどのように、canvasタグを使ってどこに描画させるかを指定します。詳しくはこちらの記事をご覧ください。

【3分でわかる】HTML5とは?初心者向けに超わかりやすく説明してみた
更新日 : 2019年7月5日

CSS3

CSS3はCSSの新しいバージョンで、こちらもHTML5と同じく現在の主流として使われています。CSSではHTMLで作ったコンテンツのレイアウトを決めたり、装飾をすることが出来ます。

ただし、Canvasでレイアウトを決めた部分にはCSSのレイアウトを適用させることが出来ません。CSSは主にCanvasで作った図の背景の色を決める部分などで使われることが多いです。詳しくはこちらの記事をご覧ください。

JavaScript

JavaScriptはブラウザで動いて、HTMLでは処理できないようなことを処理することが出来ます。Canvasを使う場合は、先程のcanvasタグを書いた部分に対する図そのものを、JavaScriptで書いていきます

図そのものはCanvasという仕様に用意されている、線を引くための関数などを組み合わせて書いていきます。詳しくはこちらの記事をご覧ください。

JavaScriptとは?初心者向けに概要や使い方をわかりやすく解説
更新日 : 2019年9月10日

Canvasを使って四角形を書いてみよう

それでは早速Canvasを使って四角形を書いてみましょう。こちらのコードをご覧ください。

canvas.html

rectangle.js

実行結果

これらのコードを同じフォルダの階層に入れて、ブラウザでHTMLファイルを開いてみましょう。実行結果のようになれば、Canvasで図形を描画させることが出来ました。

HTMLコードでは、headタグの中で実際に四角形を描画するためのJavaScriptを読み込んでいます。その読み込んだJavaScriptをcanvasタグの中で描画しています。このコードはこちらのコードを参考に改変してわかりやすくコメントなどを加えています。

四角形をもっと簡単に描いてみよう

次は先程のコードを少し変えて、四角形を簡単に描いてみましょう。変えるのはJavaScriptのほうだけで構いません。こちらのコードをご覧ください。

rectangle.js

先程は線を描く関数だけを使って四角形を書いていましたが、関数を使って簡単に四角形を描きました。このstrokeRect関数は四角形の枠を描くことが出来る関数で、他にもfillRect関数では枠の内側の色を決めることが出来ます。

Canvasではこのように、図形を簡単に描くための関数がたくさん用意されています。

まとめ

この記事ではHTMLのCanvasがどういったものなのかについて解説をしてきました。基本的なことについては分かって頂けたでしょうか?

CanvasではHTML5とJavaScriptを組み合わせて図を描画することが出来ます。今回は入門以前のような内容でしたが、これを気にJavaScriptなども学んでみてはいかがでしょう。

LINEで送る
Pocket

最短でエンジニアを目指すなら侍エンジニア塾

cta_under_bnr

侍エンジニア塾は業界で初めてマンツーマンレッスンを始めたプログラミングスクールです。これまでの指導実績は16,000名を超え、未経験から数多くのエンジニアを輩出しています。

あなたの目的に合わせてカリキュラムを作成し、現役エンジニア講師が専属であなたの学習をサポートするため効率よく学習を進めることができますよ。

無理な勧誘などは一切ありません。まずは無料体験レッスンを受講ください。

無料体験レッスンの詳細はこちら

書いた人

侍ブログ編集部

侍ブログ編集部

侍エンジニア塾は「人生を変えるプログラミング学習」をコンセンプトに、過去多くのフリーランスエンジニアを輩出したプログラミングスクールです。プログラミングに役立つ情報や有用な情報を発信していきます。
サービスページはこちら
ツイッターはこちら
フェイスブックはこちら

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説