【初心者向け】HTMLで図形を描くCanvas要素を紹介
![HTMLで図形を描くCanvas要素を紹介](https://web-camp.io/magazine/wp-content/uploads/2021/08/210912_html-zukei.png)
「HTMLで図形を描いてみたいけどやり方が分からない」
こう思う方は多いのではないでしょうか。本記事をお読みいただくと以下が分かります。
- HTMLで図形の描き方が分かる(JavaScriptも使います)
少しプログラムに慣れてきた方で、次のステップに進む際に図形のように「自分で手を動かして何か作って見る」経験は非常に重要です。是非本記事をお読みいただき、理解を深めてください。
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つのコードを紐解いていくとそこまで難しい内容ではありません。
是非本記事で理解を深め、色々な図形を描いてみてください。
\プログラミングスクールを比較/
DMM WEBCAMP |
COACHTECH |
RUNTEQ |
|
---|---|---|---|
![]() |
![]() |
![]() |
|
目指せる姿 | WEBエンジニアへの転職 |
フリーランスエンジニア | WEBエンジニアへの転職 |
分割払い | ○ | ○ | ○ |
補助金 | ○ | × | ○ |
転職保証 | ○ | × | × |
受講期間 | 12週間〜 | 3ヶ月〜 | 5ヶ月〜 |
特徴 |
【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり |
【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当 |
【とことん勉強してから転職したい方向け】 1,000時間(約9カ月)のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す |
料金 | 329,350円〜 ※給付金適用後 |
42万9,000円~ | 55万円 |
公式HP |
公式HP |
公式HP |