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

HTML5 Canvasで長方形を描画する方法をわかりやすく解説

HTML5の<canvas>タグは、JavaScriptなどのスクリプトを使ってグラフィックやアニメーションを描画するための要素です。HTML5で新たに導入されたタグであり、動的なビジュアル表現を実現するための強力な機能を提供します。

canvas要素には「getContext」というDOMメソッドが用意されています。このメソッドはレンダリングコンテキストと、それに付随する描画機能一式を取得するもので、引数としてコンテキストの種類（ここでは2D描画を表す「2d」）を1つ指定します。

fillRect()メソッドで長方形を描く

HTML5 Canvasで長方形を描画するには、fillRect(x, y, width, height)メソッドを使用します。各引数の意味は次のとおりです。

  • x：長方形の左上隅のX座標
  • y：長方形の左上隅のY座標
  • width：長方形の幅
  • height：長方形の高さ

また、「fillStyle」プロパティに色を指定することで、塗りつぶす色を自由に変更できます。

以下のコードを実行して、HTML5 Canvasで長方形を描画する方法を実際に確認してみましょう。

サンプルコード

<!DOCTYPE html>
<html>
   <head>
      <title>HTML5 Canvas Tag</title>
   </head>

   <body>
      <canvas id="newCanvas" width="200" height="100" style="border:1px
         solid #000000;"></canvas>
      <script>
         var c = document.getElementById('newCanvas');
         var ctx = c.getContext('2d');
         ctx.fillStyle = '#7cce2b';
         ctx.fillRect(0,0,300,100);
      </script>
   </body>
</html>

このコードでは、まずgetElementById()でcanvas要素を取得し、getContext('2d')で2D描画コンテキストを作成しています。次に、fillStyleで緑色（#7cce2b）を指定し、fillRect(0,0,300,100)によって原点から幅300px・高さ100pxの長方形を描画しています。

実行結果

上記のコードを実行すると、黒い枠線で囲まれた領域の中に、指定した色の長方形が表示されます。

  1. HTML5 Canvasを使って星を描く方法を解説

    HTMLのcanvas要素に描画を行うには、JavaScriptを使用します。実際に描き始める前に、HTML DOMメソッドであるgetElementById()とgetContext()を使って、キャンバスへの参照と描画コンテキストを取得しておく必要があります。HTMLで星を描くには、canvas要素を利用します。星形を描く際にはlineTo()メソッドが便利です。このメソッドはx座標とy座標の2つのパラメータを受け取り、その位置へ線を引くことで図形を形成していきます。まず、HTMLドキュメント内にキャンバスを配置する方法から見ていきましょう。サンプルコード以下のコードを実行すると、HTML

  2. HTML Canvasで角丸の長方形を描く方法をわかりやすく解説

    HTMLで図形を描画するには、canvas要素を使用します。通常の長方形であればrect()メソッドで簡単に描けますが、角が丸い長方形（角丸長方形）を描きたい場合は、rect()メソッドだけでは対応できません。 角丸長方形を作成するには、直線を引くためのlineTo()メソッドと、二次ベジェ曲線を描くquadraticCurveTo()メソッドを組み合わせます。長方形の四隅を二次ベジェ曲線で滑らかにつなぐことで、角の丸い長方形を実現できます。 HTML5でキャンバスを作成する方法 まずは、HTML5でキャンバスを作成する基本的な手順です。<canvas>要素を配置し、JavaScr