図形が描ける！HTML5のcanvasの書き方【初心者向け】
初心者向けにHTML5でcanvasを書く方法について解説しています。canvasは図形や2Dのグラフィックを作成する際に用いられますが、本格的なアプリケーションを作ることも可能です。HTMLとJavaScriptで作成できます。
TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。
HTML5で使うcanvasの書き方について解説しています。
ブラウザ上で絵を描くアプリなどもcanvasで作ることができるので、活用の幅は広いはずです。HTML5とJavaScriptで作ることができるので、ぜひ書き方を覚えておきましょう。
HTMLについてそもそもよく分からないという方は、HTMLとは何なのか解説した記事をまずご覧ください。
なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。
canvasタグとは
canvasタグとは、2Dグラフィックを描画するためのタグで、HTML5で追加されました。
HTML5以前は画像などを読み込むかFlashなどで描画するのが一般的でしたが、canvasタグの登場により、HTML5とJavaScriptで簡単に描画することができるようになりました。
canvasタグの書き方
canvasタグの書き方は次のとおりです。
<canvas id="id名" width="canvasの横幅" height="canvasの縦幅"></canvas>
canvasに図形を書く方法はたくさんあるため、ここでは線を書く方法を紹介します。
/* 線を引く */
// canvasを取得する
var line_canvas = document.getElementById("id名");
// コンテキストを取得する
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();
ぱっと見複雑ですが、一つ一つの工程を見ていくと何をしているのかを理解できると思います。
[PR] HTML/CSSで挫折しない学習方法を動画で公開中
実際に書いてみよう
それでは実際に書いてみましょう。canvas.htmlを作成して次のソースコードを入力して保存します。
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を活用してみて下さい。
また、TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。
独学に限界を感じている場合はご検討ください。
