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

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

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

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

例

次のコードを実行して、HTML5でlineTo（）を使用して線を引くことができます-

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Canvas</title>
   </head>
   <body>
      <canvas id="newCanvas" width="300" height="150" style="border:1px solid #000000;"></canvas>
      <script>
         var c = document.getElementById("newCanvas");
         var ctxt = c.getContext("2d");
         ctxt.beginPath();
         ctxt.moveTo(70, 50);
         ctxt.lineTo(50, 120);
         ctxt.stroke();
      </script>
   </body>
</html>

  1. HTML5でfillText（）を使用してテキストを描画するにはどうすればよいですか？

    HTML5でキャンバスに塗りつぶされたテキストを描画するには、fillText（）メソッドを使用します。 fillText（）メソッドの構文は次のとおりです。これは、指定された座標xおよびyで示される指定された位置で指定されたテキストを塗りつぶします。デフォルトの色は黒です。 fillText(text, x, y [, maxWidth ] ) fillText（）メソッドのパラメーター値は次のとおりです。 S。いいえ パラメータ 説明 1 text 書き込むテキスト 2 x x座標 3 y y座標 4

  2. HTML5でarc（）を使用して円を描く方法は？

    arc（）メソッドは、canvas要素を使用してHTML5で円を作成するために使用されます。 arc（）メソッドを使用する円の場合、開始角度を0に、終了角度を2*Math.PIに使用します。 これがarc（）メソッドのパラメータ値です- S。いいえ パラメータ 説明 1 x x座標 2 y y座標 3 r 円の半径 4 startingAngle ラジアン単位の開始角度 5 endingAngle ラジアン単位の終了角度 6 反時計回り（True / False）