スライドショー

知っておきたい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タグを使ってどこに描画させるかを指定します。詳しくはこちらの記事をご覧ください。

HTML5とは?初心者向けに特長や使い方を超わかりやすく説明してみた
更新日 : 2019年12月2日

CSS3

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

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

JavaScript

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

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

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

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

ITエンジニアへ転職したい方におすすめ

自分を評価してくれる企業に転職して年収を上げたい! 自分のスキルにあった独自案件を知りたい!
エンジニアは今もっとも注目されている職業の1つ。エンジニアになって年収を増やしたい方や、あなたのスキルに見合った企業へ転職したいエンジニアの方も多いですよね。

しかし、大手の転職媒体は扱う求人数が多くても、誰もが登録しているので競争率もかなり高くなっています。そのため、あなたの条件に見合った企業を見つけても転職するためには、相応の努力とスキルが必要となります。

こういった媒体では、未経験からエンジニアを目指す方やエンジニア歴2〜3年で転職を考えている方にとって、最適な転職環境とはいえません。

そこでオススメしたいのが、未経験者や若手エンジニア向けの独自案件を多く掲載している「侍ワークス」です。

侍ワークスは、独自案件を多く掲載しているだけでなく、

・応募から就業まで一貫したサポート

・就業後もアフターフォロー

といった経験の浅い方や初めてエンジニアを目指す方にも安心のフォロー体制が整っています。もちろん登録は完全無料!しかも案件を見るだけなら登録も不要です。

まずは、お気軽にどんな求人があるか見てみてください。あなたにピッタリの企業がきっと見つかりますよ! 侍ワークスの求人情報を見る

書いた人

侍ブログ編集部

侍ブログ編集部

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