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

キャンバスHTML5を使用して星を描く方法は？

HTMLキャンバスへの描画は、JavaScriptを使用して行います。キャンバスに描画する前に、HTML DOMメソッドgetElementById（）およびgetContext（）を使用します。 HTMLで星を描くには、canvas要素を使用します。

キャンバスでは、lineTo（）メソッドを使用して星を描画します。 lineTo（）メソッドには、描画に役立つように線を配置するxおよびyパラメータ値が含まれています。

HTMLドキュメントにキャンバスを描画するには：

キャンバスHTML5を使用して星を描く方法は？

例

次のコードを実行して、HTML5キャンバスを使用して星を描くことができます

<!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>

出力

キャンバスHTML5を使用して星を描く方法は？


  1. HTML5キャンバスで画像を使用する方法は？

    HTML5 タグは、スクリプトを使用してグラフィックやアニメーションなどを描画するために使用されます。 HTML5で導入された新しいタグです。 HTML5キャンバスで画像を使用するには、drawImage（）メソッドを使用します。このメソッドは、指定された画像をキャンバスに描画します。 次のコードを実行して、HTMLCanvasで画像を使用する方法を学ぶことができます。ここで、画像は画像またはキャンバスオブジェクトへの参照です。 xとyは、画像を配置するターゲットキャンバス上の座標を形成します。 例 <!DOCTYPE HTML> <html>  

  2. HTML5でlineTo（）を使用して線を引く方法は？

    HTMLで線を描画するには、canvas要素を使用します。キャンバスでは、lineTo（）メソッドを使用して線を描画します。 lineTo（）メソッドには、線を配置するxおよびyパラメーター値が含まれています。 例 次のコードを実行して、HTML5でlineTo（）を使用して線を引くことができます- <!DOCTYPE html> <html>    <head>       <title>HTML Canvas</title>    </head>