【初心者向け】HTMLで図形を描くCanvas要素を紹介

2021.09.15

HTMLで図形を描いてみたいけどやり方が分からない

こう思う方は多いのではないでしょうか。本記事をお読みいただくと以下が分かります。

  • HTMLで図形の描き方が分かる(JavaScriptも使います)

少しプログラムに慣れてきた方で、次のステップに進む際に図形のように「自分で手を動かして何か作って見る」経験は非常に重要です。是非本記事をお読みいただき、理解を深めてください。

HTMLで図形を描くためのCanvasとは

HTMLで図形を描くための要素がCanvasです。以前はHTML上で図を描くには、「.jpeg」のような拡張子がついた画像を準備する必要があったり、アニメーションをつけるためにFlashなどのプラグインのデータを用意しなければなりませんでした

しかしCanvas要素の登場によって、これらを用意せずともHTMLとJavaScriptで図形を描くことができるようになりました

次から、早速具体的なコードの書き方を紹介します。

HTMLでCanvas要素を使ってみよう

(1)基本の書き方

Canvas要素は、以下のように使用します。

HTML
<canvas id="任意のid名" width="canvasの横幅" height="canvasの縦幅"> </canvas>

Canvas要素自体はこれで終了ですが、次にこのHTMLとJavaScriptを設定した任意のid名で関連付けて、描く図形を指定する必要があります

(2)JavaScriptを書いてみる

それでは、続いて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では転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2022 WEBCAMP MEDIA Powered by AFFINGER5