4
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

HTMLでcanvasを使うと図形を描ける

Posted at

#プログラミング勉強日記
2020年10月8日
HTMLで画像に置き換えることなく図形を描くことができることを知ったのでまとめる。

#canvasタグとは
 図形を描くためにはpngやjpegなどの画像に置き換えることやFlashなどのプラグインデータを埋め込むことが一般的であったが、HTML5から2Dのグラフィックスを描く、<canvas>要素が追加された。canvasを使用することで、標準のHTMLとJavaScriptだけでグラフやゲームグラフィックスなどの図形を表示できるようになった。

#書き方
 canvasタグは以下のように書く。

書き方
<canvas id="id名" width="canvasの横幅" height="canvasの縦幅">
</canvas>

 しかし、図形はこれだけでは表示されない。HTMLの部分とJavaScriptをid名で関連付けて、描く図形を指定する。JavaScriptの部分では描く図形を指定する前にまずキャンパスを使うための準備が必要になる。

描画コンテキストの取得
var canvas = document.getElementById("id名");
var context = canvas.getContext("2d");

 描画コンテキストの取得の1行目ではgetElementByIdメソッドを使って、HTML文書内でid名を指定した要素をの部分を参照している。(これで取得したオブジェクトにcanvasという名前を付けている。)
 このcanvasに対してキャンバスにアクセスするためのメソッドであるgetContextメソッド(canvasを操作するときには必ず必要)を実行している。
 2行目では、getContext("2d")でコンテキスト名を指定している。現在ではこのメソッドでは2dのみがサポートされている。canvasを使って平面図形を描くときには2dを指定する。

 これだけでも大丈夫だが、canvasをサポートしていないブラウザをステイすると、描画コードの部分をif文で囲んでおくとなおよい。

描画コンテキストの取得
  var canvas = document.getElementById("id名");
  if (canvas.getContext) {
    var context = canvas.getContext("2d");
    // 図形を描くコードを記述
}

#サンプルコード
 以上を踏まえて実際に線と四角、円を描画する。

サンプルコード
<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 = 'blue';
      cir_ctx.beginPath();
      // 円を描く位置を決める
      cir_ctx.arc(50, 50, 40, 0, Math.PI * 2, false);
      // 実際に円を書く
      cir_ctx.fill();
    }
    </script>
  </body>
</html>

image.png

#参考文献
canvasタグで図形を描く
図形が描ける!HTML5のcanvasの書き方【初心者向け】

4
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?