【初心者向け】HTMLで図形を描くCanvas要素を紹介
「HTMLで図形を描いてみたいけどやり方が分からない」
こう思う方は多いのではないでしょうか。本記事をお読みいただくと以下が分かります。
- HTMLで図形の描き方が分かる（JavaScriptも使います）
少しプログラムに慣れてきた方で、次のステップに進む際に図形のように「自分で手を動かして何か作って見る」経験は非常に重要です。是非本記事をお読みいただき、理解を深めてください。
＼プログラミングスクールを比較／
|
DMM WEBCAMP |
COACHTECH |
RUNTEQ |
|
|---|---|---|---|
|
|
|
|
| 目指せる姿 | WEBエンジニアへの転職 |
フリーランスエンジニア | WEBエンジニアへの転職 |
| 分割払い | ○ | ○ | ○ |
| 補助金 | ○ | × | ○ |
| 転職保証 | ○ | × | × |
| 受講期間 | 3ヶ月〜 | 3ヶ月〜 | 5ヶ月〜 |
| 特徴 |
【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり |
【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当 |
【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す |
| 料金 | 329,350円〜 ※給付金適用後 |
42万9,000円~ | 55万円 |
|
公式HP |
公式HP |
公式HP |
HTMLで図形を描くためのCanvasとは
HTMLで図形を描くための要素がCanvasです。以前はHTML上で図を描くには、「.jpeg」のような拡張子がついた画像を準備する必要があったり、アニメーションをつけるためにFlashなどのプラグインのデータを用意しなければなりませんでした。
しかしCanvas要素の登場によって、これらを用意せずともHTMLとJavaScriptで図形を描くことができるようになりました。
次から、早速具体的なコードの書き方を紹介します。
HTMLでCanvas要素を使ってみよう
(1)基本の書き方
Canvas要素は、以下のように使用します。
<canvas id="任意のid名" width="canvasの横幅" height="canvasの縦幅"> </canvas>
Canvas要素自体はこれで終了ですが、次にこのHTMLとJavaScriptを設定した任意のid名で関連付けて、描く図形を指定する必要があります。
(2)JavaScriptを書いてみる
それでは、続いてJavaScriptの書き方を見ていきましょう。
var canvas = document.getElementById("id名");
var context = canvas.getContext("2d");
まず1行目のgetElementByIdを使い、HTMLでidを指定した部分を参照し、このオブジェクトに対しcanvasという名前を設定します。
次に2行目のgetContextでコンテキスト名を指定します。2dは、2次元グラフィックを描くという意味です。
ここまでで基本的な説明は終了です。最後に、実際にコードを書いてみましょう。
(3)実際にHTMLで図形を描いてみよう
それでは、実際にコードを紹介します。今回は直線と四角形、円の3つを描いてみましょう。
一見コードが長すぎる・・・と思われるかもしれないですが、1つ1つ分解して考えると難しくはありません。先ほど紹介したコードの書き方に、具体的な図形の色を指定しているくらいです。
<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() {
/* 線を引くためのgetElementByIdとgetContext */
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();
/* 四角を描くためのgetElementByIdとgetContext */
var rect_canvas = document.getElementById("rectangle");
var rect_ctx = rect_canvas.getContext("2d");
rect_ctx.beginPath();
// 四角を描く
rect_ctx.strokeRect(20, 20, 60, 60);
/* 色を付けた円を書くためのgetElementByIdとgetContext */
var cir_canvas = document.getElementById("circle");
var cir_ctx = cir_canvas.getContext("2d");
// 色の指定
cir_ctx.fillStyle = 'red';
cir_ctx.beginPath();
// 円を描く位置を指定
cir_ctx.arc(50, 50, 40, 0, Math.PI * 2, false);
// 円を描く
cir_ctx.fill();
}
</script>
</body>
</html>
まとめ
いかがでしたでしょうか。HTMLで図形を描くための方法を紹介しました。
HTMLもJavaScriptも・・・と複雑に感じるかもしれないですが、1つ1つのコードを紐解いていくとそこまで難しい内容ではありません。
是非本記事で理解を深め、色々な図形を描いてみてください。
