JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでHTMLキャンバスに描画する方法をわかりやすく解説

HTMLキャンバス（canvas）への描画は、JavaScriptを使って行います。キャンバスに描画する前に、HTML DOMメソッドのgetElementById()とgetContext()を使用する必要があります。

ここでは、JavaScriptでキャンバスに図形を描画する基本的な手順を紹介します。

キャンバスに描画する基本手順

  • getElementById()メソッドを使って、HTML内のキャンバス要素を取得します。
  • getContext()メソッドを呼び出して、描画用のオブジェクトを取得します。このオブジェクトが、図形を描くための各種メソッドやプロパティを提供します。
  • 取得した描画オブジェクトを使って、キャンバス上に図形やテキストなどを描画します。

コード例

以下のコードを実行すると、JavaScriptでキャンバスに矩形（長方形）を描画できます。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Canvas</title>
   </head>
   <body>
      <canvas id="newCanvas" width="400" height="250" style="border:2px solid #000000;"></canvas>
      <script>
         var canvas = document.getElementById("newCanvas");
         var ctxt = canvas.getContext("2d");
         ctxt.fillStyle = "#56A7E2";
         ctxt.fillRect(0,0,250,120);
      </script>
   </body>
</html>

コードの解説

このサンプルコードの処理の流れは以下のとおりです。

  • document.getElementById("newCanvas")：IDが「newCanvas」のキャンバス要素を取得します。
  • canvas.getContext("2d")：2D描画コンテキストを取得します。引数に「2d」を指定することで、平面描画用のオブジェクトが返されます。
  • ctxt.fillStyle = "#56A7E2"：塗りつぶしの色を水色（#56A7E2）に設定します。
  • ctxt.fillRect(0,0,250,120)：キャンバスの左上を原点として、幅250ピクセル、高さ120ピクセルの長方形を描画します。

このように、getElementById()でキャンバス要素を取得し、getContext()で描画コンテキストを用意すれば、あとはfillRect()やfillStyleなどのメソッド・プロパティを組み合わせて、自由にグラフィックを描くことができます。線の描画（strokeRect、lineToなど）や円の描画（arc）なども同じ要領で行えるので、ぜひ various な図形描画に挑戦してみてください。

  1. JavaScriptで画面解像度を検出する方法を解説！window.screenの使い方

    はじめにWebアプリケーションを開発する際、ユーザーの画面解像度（スクリーンサイズ）を検出したいケースは多くあります。例えば、レスポンシブデザインの調整や、表示領域に応じたコンテンツの出し分けなどが挙げられます。JavaScriptでは、window.screenオブジェクトを使うことで、簡単に画面の解像度情報を取得できます。この記事では、その具体的な方法をサンプルコードとともにわかりやすく解説します。window.screenオブジェクトとはwindow.screenは、ユーザーが使用しているディスプレイ（画面）に関する情報を保持しているオブジェクトです。このオブジェクトのプロパティを参照す

  2. JavaScriptでinnerHTMLを設定する方法をわかりやすく解説

    JavaScriptでHTML要素の内容を動的に書き換えたい場合に便利なのが、innerHTMLプロパティです。innerHTMLを使えば、指定した要素の中にHTML文字列をそのまま挿入・置き換えることができます。本記事では、innerHTMLを設定する正しい構文と、実際に動作するサンプルコードを初心者向けに解説します。 innerHTMLを設定する正しい構文 innerHTMLを設定する際の正しい構文は以下のとおりです。 document.getElementById(yourIdName).innerHTML=yourValue; この構文では、まずgetElementById()メソッド