図形が描ける！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で作ることができるので、活用の幅は広いはずです。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();
ぱっと見複雑ですが、一つ一つの工程を見ていくと何をしているのかを理解できると思います。
実際に書いてみよう
それでは実際に書いてみましょう。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では初心者でもオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。
独学に限界を感じている場合はご検討ください。
プログラミングを独学していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
厳しい試験を通過した講師
があなたの相談に真摯に向き合います。
「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」
こんな気持ちでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
