スライドショースライドショー

知っておきたい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

<html>
  <head>
    <script type="text/javascript" src="./rectangle.js"></script>
  </head>
  <body>
    <h1>Rectangle</h1>
    <canvas id="rectangle" width="640" height="480"></canvas>
  </body>
</html>

rectangle.js

onload = function() {
  draw();
};

function draw() {
  var canvas = document.getElementById('rectangle');
  if ( ! canvas || ! canvas.getContext ) {
    return false;
  }
  var cvs = canvas.getContext('2d');

  /* rectangle */
  cvs.beginPath(); /* 図形を描き始めることを宣言 */
  cvs.moveTo(50, 50); /* 図形の描き始めを移動 */
  cvs.lineTo(150, 50); /* 図形の線の終わりを決める */
  cvs.lineTo(150, 150);
  cvs.lineTo(50, 150);
  cvs.closePath(); /* 描いた線を閉じる */
  cvs.stroke(); /* 描いた図形を線で表示させる */
}

実行結果

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

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

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

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

rectangle.js

onload = function() {
  draw();
};
 
function draw() {
  var canvas = document.getElementById('rectangle');
  if ( ! canvas || ! canvas.getContext ) {
    return false;
  }
  var cvs = canvas.getContext('2d');
 
  /* rectangle */
  cvs.strokeRect(50,50,100,100); // (50,50)の位置に100x100のサイズの四角形を描く
}

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

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

まとめ

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

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

LINEで送る
Pocket

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

侍ブログ編集部

侍ブログ編集部

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

おすすめコンテンツ

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

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