図形が描ける！HTML5のcanvasの書き方【初心者向け】
初心者向けにHTML5でcanvasを書く方法について解説しています。canvasは図形や2Dのグラフィックを作成する際に用いられますが、本格的なアプリケーションを作ることも可能です。HTMLとJavaScriptで作成できます。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
監修してくれたメンター
ノマリカ
伝わりやすくて明快なデザインを得意としている。
HTML5で使うcanvasの書き方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
ブラウザ上で絵を描くアプリなどもcanvasで作ることができるので、活用の幅は広いはずです。
HTMLとJavaScriptで作ることができるので、ぜひ書き方を覚えておきましょう。
目次
そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。
canvasとは
canvasとは、図形を描画するためのHTMLタグで、HTML5の策定時に新たに追加されました。
HTML5以前は、図形をWebで表示させるために、画像などを読み込むかFlashなどで描画するのが一般的でした。
しかしcanvasタグの登場により、HTMLとJavaScriptで簡単に描画することができるようになったのです。
canvasタグを使うのに必要な知識
簡単とはいえcanvasタグを用いてWeb上に図形を描画するには、以下に示すとおり、HTML / CSS / Javascriptの基本的な知識が必要です。
HTML
Webページを作成するにはお馴染みのHTMLですが、役割はWebページの個々の内容（要素）をタグで囲み文書構造をブラウザに伝えることです。
canvasタグもHTMLの要素の一つなので、まずはHTMLの理解が必要になってきます。
CSS
CSSの役割は、HTMLで作成した要素のレイアウトや見た目を制御することです。
canvasタグの背景色やページ全体のデザインを決めるために必要になってきます。
JavaScript
Javascriptの役割は、HTMLで作成した要素を動かしたり、クリック等のユーザー操作に伴って表示を変えるなどの処理（イベント）をプログラムで制御することです。
canvasタグ内の図形を描画するのもJavascriptです。
以降では、Javascriptでcanvasの描画を行う方法を解説します。
canvasで図形を描画する方法
canvasで図形を描画するには、まずHTML内に以下の例のようにcanvasタグを書きます。
<canvas id="id名" width="横幅のpx値" height="縦幅のpx値"></canvas>
さらにHTML内にscriptタグを追加し、その中にグラフィックを描画するための命令を書いていきます。
canvasの描画方法はたくさんあるため、ここでは線を書く方法を紹介します。
// line_canvasという変数を定義し、canvas要素を取得する
var line_canvas = document.getElementById("id名");
// 2Dグラフィックの描画に必要な各種設定（コンテキスト）を取得する
var line_ctx = line_canvas.getContext("2d");
// 描画開始位置を初期化する
line_ctx.beginPath();
// 開始位置に移動する
line_ctx.moveTo(20, 20);
// 線を引く
line_ctx.lineTo(80, 80);
// 描画を終了する
line_ctx.closePath();
// 実際に線を引く
line_ctx.stroke();
以上、ぱっと見複雑ですが一つ一つの工程を見ていくと何をしているのか理解できると思います。
実際に書いてみよう
それでは実際に書いてみましょう。
canvas.htmlを作成して以下のソースコードをコピー＆ペーストして保存します。
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<h1>線</h1>
<canvas id="line" width="100" height="100"></canvas>
<h1>四角</h1>
<canvas id="rectangle" width="100" height="100"></canvas>
<h1>円</h1>
<canvas id="circle" width="100" height="100"></canvas>
<script type="text/javascript">
//読み込み時に実行する
onload = function() {
/* 線を引く */
var line_canvas = document.getElementById("line");
var line_ctx = line_canvas.getContext("2d");
line_ctx.beginPath();
// 開始位置に移動する
line_ctx.moveTo(20, 20);
// 線を引く
line_ctx.lineTo(80, 80);
line_ctx.closePath();
line_ctx.stroke();
/* 四角を描く */
var rect_canvas = document.getElementById("rectangle");
var rect_ctx = rect_canvas.getContext("2d");
rect_ctx.beginPath();
// 四角を描く
rect_ctx.strokeRect(20, 20, 60, 60);
/* 色の付いた円を書く */
var cir_canvas = document.getElementById("circle");
var cir_ctx = cir_canvas.getContext("2d");
// 塗りつぶす色を指定する
cir_ctx.fillStyle = 'rgb(0, 255, 0)';
cir_ctx.beginPath();
// 円を描く位置を決める
cir_ctx.arc(50, 50, 40, 0, Math.PI * 2, false);
// 実際に円を書く
cir_ctx.fill();
}
</script>
</body>
</html>
canvas.htmlをブラウザで確認してみましょう。
以下のように、それぞれの図形が描画されています。
少しJavascriptの記述が複雑にはなりますが、以下のサンプルように簡単な構成図も描画できます。
See the Pen
Untitled by nomallica (@nomallica)
on CodePen.
まとめ
今回はHTML5で使うcanvasの書き方について解説しました。
紹介したシンプルな図形を描く方法を組み合わせることで複雑な図形を描くことができたり、作り込むことでペイントのような描画ツールを作成できたりします。
ぜひcanvasを活用してみて下さい。
HTMLを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
HTMLを学習していて、このように思ったことはありませんか？
テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
