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

HTMLキャンバスに角の丸い長方形を描く方法は？

HTMLで長方形を描画するには、canvas要素を使用します。キャンバスでは、rect（）メソッドを使用して長方形を描画します。ただし、角の丸い長方形を作成する場合、rect（）メソッドを使用しても機能しません。 lineTo（）メソッドとquadraticCurveTo（）メソッドを使用して、角の丸い長方形を作成します。

これは、HTML5でキャンバスを作成する方法です-

HTMLキャンバスに角の丸い長方形を描く方法は？

キャンバスに角の丸い長方形を作成する方法を学ぶことができます

例 
<!DOCTYPE HTML>
<html>
   <head>
      <title>HTML5 Canvas Tag</title>
   </head>
   <body>
      <canvas id="newCanvas" width="300" height="150"></canvas>
      <script>
         var canvas = document.getElementById('newCanvas');
         var ctx = canvas.getContext('2d');
         ctx.beginPath();
         ctx.moveTo(20, 10);
         ctx.lineTo(80, 10);
         ctx.quadraticCurveTo(90, 10, 90, 20);
         ctx.lineTo(90, 80);
         ctx.quadraticCurveTo(90, 90, 80, 90);
         ctx.lineTo(20, 90);
         ctx.quadraticCurveTo(10, 90, 10, 80);
         ctx.lineTo(10, 20);
         ctx.quadraticCurveTo(10, 10, 20, 10);
         ctx.stroke();
      </script>
   </body>
</html>

出力

HTMLキャンバスに角の丸い長方形を描く方法は？


  1. HTMLキャンバスstroke（）メソッド

    HTMLキャンバスのstroke（）メソッドを使用して、パスを描画します。このパスは、moveTo（）およびlineTo（）メソッドを使用して描画されます。 要素を使用すると、JavaScriptを使用してWebページにグラフィックを描画できます。すべてのキャンバスには、キャンバスの高さと幅を表す2つの要素があります。つまり、それぞれ高さと幅です。 以下は構文です- ctx.stroke() ここで、canvasのstroke（）メソッドを実装する例を見てみましょう- 例 <!DOCTYPE html> <html> <body> <canvas

  2. HTMLCanvasの基本

    Webページにキャンバスを描画するには、HTML5キャンバス要素を使用します。 要素を使用すると、JavaScriptを使用してグラフィックを描画できます。キャンバスを使用して、線、長方形、ベジェ曲線などを描画します。 すべてのキャンバスには、キャンバスの高さと幅を表す2つの要素があります。つまり、それぞれ高さと幅です。 これに伴い、以下のコードスニペットに示すように、canvasのIDも設定する必要があります- <canvas id = "newCanvas" width = "100" height = "100">