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

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

HTMLのcanvas要素に描画を行うには、JavaScriptを使用します。実際に描き始める前に、HTML DOMメソッドであるgetElementById()とgetContext()を使って、キャンバスへの参照と描画コンテキストを取得しておく必要があります。

HTMLで星を描くには、canvas要素を利用します。星形を描く際にはlineTo()メソッドが便利です。このメソッドはx座標とy座標の2つのパラメータを受け取り、その位置へ線を引くことで図形を形成していきます。

まず、HTMLドキュメント内にキャンバスを配置する方法から見ていきましょう。

サンプルコード

以下のコードを実行すると、HTML5 Canvasを使って星を描画できます。ポイントとなるのは、星の各頂点の座標を順番にlineTo()で結び、最後にclosePath()でパスを閉じてfill()で塗りつぶす流れです。

<!DOCTYPE HTML>
<html>
   <head>
      <title>HTML5 Canvas Tag</title>
   </head>
   <body>
      <canvas id="newCanvas" width="300" height="250"></canvas>
      <script>
         var canvas = document.getElementById('newCanvas');
         var ctx = canvas.getContext('2d');
         ctx.fillStyle = "blue";
         ctx.beginPath();
         ctx.moveTo(108, 0.0);
         ctx.lineTo(141, 70);
         ctx.lineTo(218, 78.3);
         ctx.lineTo(162, 131);
         ctx.lineTo(175, 205);
         ctx.lineTo(108, 170);
         ctx.lineTo(41.2, 205);
         ctx.lineTo(55, 131);
         ctx.lineTo(1, 78);
         ctx.lineTo(75, 68);
         ctx.lineTo(108, 0);
         ctx.closePath();
         ctx.fill();
      </script>
   </body>
</html>

実行結果

上記のコードを実行すると、青く塗りつぶされた五角形の星がキャンバス上に表示されます。fillStyleプロパティの値を変更すれば、好きな色に塗り替えることも可能です。

  1. HTML5のCanvasで画像を描画する方法【drawImage()の使い方を解説】

    HTML5の<canvas>タグは、JavaScriptなどのスクリプトを使ってグラフィックスやアニメーションを描画するための要素です。HTML5で新たに導入されたタグであり、ブラウザ上で動的なビジュアル表現を実現できます。 HTML5キャンバスで画像を扱うには、drawImage()メソッドを使用します。このメソッドは、指定した画像をキャンバス上にそのまま描画します。 drawImage()メソッドの基本構文と引数 drawImage()メソッドの基本的な呼び出し形式は次の通りです。 ctx.drawImage(img, x, y); 各引数の意味は以下の通りです。 img：

  2. HTML5のlineTo()メソッドで線を描画する方法

    HTML5のlineTo()メソッドで線を描画する方法HTMLで線を描画するには、canvas要素を使用します。canvas上に線を引く際に活躍するのがlineTo()メソッドです。このメソッドはx座標とy座標の2つのパラメータを受け取り、指定した位置までの直線を定義します。lineTo()メソッドは単独では機能せず、以下のメソッドと組み合わせて使用するのが基本の流れです。beginPath(): 新しいパスの作成を開始するmoveTo(): 線の始点となる座標を指定するlineTo(): 線の終点となる座標を指定するstroke(): 定義したパスを実際に画面へ描画するサンプルコード以下のコ