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

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

HTMLで図形を描画するには、canvas要素を使用します。通常の長方形であればrect()メソッドで簡単に描けますが、角が丸い長方形（角丸長方形）を描きたい場合は、rect()メソッドだけでは対応できません。

角丸長方形を作成するには、直線を引くためのlineTo()メソッドと、二次ベジェ曲線を描くquadraticCurveTo()メソッドを組み合わせます。長方形の四隅を二次ベジェ曲線で滑らかにつなぐことで、角の丸い長方形を実現できます。

HTML5でキャンバスを作成する方法

まずは、HTML5でキャンバスを作成する基本的な手順です。<canvas>要素を配置し、JavaScriptのgetContext('2d')で描画コンテキストを取得します。

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

以下のサンプルコードで、キャンバスに角丸長方形を描画する方法を確認してみましょう。

サンプルコード

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

コードのポイント

  • moveTo() / lineTo()：長方形の各辺となる直線部分を描画します。
  • quadraticCurveTo(制御点X, 制御点Y, 終点X, 終点Y)：制御点を指定して二次ベジェ曲線を描き、四隅を滑らかに丸めます。
  • stroke()：定義したパスを実際にキャンバス上に描画します。塗りつぶしたい場合はfill()を使用します。

出力結果

上記のコードをブラウザで実行すると、四隅が滑らかに丸められた長方形が描画されます。

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

  1. HTMLキャンバスのstroke()メソッドとは？使い方とサンプルコードを解説

    HTMLキャンバスのstroke()メソッドは、定義されたパス（軌跡）を実際に描画するためのメソッドです。パスそのものはmoveTo()やlineTo()などのメソッドで定義しますが、この段階ではまだ画面には表示されません。stroke()を呼び出すことで、はじめて線として描き出されます。<canvas>要素の基本<canvas>要素を使うと、JavaScriptを通じてWebページ上に図形やグラフィックを自由に描画できます。canvas要素には、描画領域のサイズを指定する2つの属性があります。width：キャンバスの幅を指定height：キャンバスの高さを指定stro

  2. HTML Canvasの基本を解説!図形や曲線を描画する方法

    Webページ上にキャンバスを描画するには、HTML5の<canvas>要素を使用します。<canvas>要素を使うと、JavaScriptを通じてグラフィックスを自由に描画できます。線分、長方形、ベジェ曲線など、さまざまな図形を描くことが可能です。canvas要素の基本的な設定すべてのcanvas要素には、キャンバスのサイズを指定するためのheight(高さ)とwidth(幅)という2つの属性があります。さらに、JavaScriptからcanvas要素を操作できるように、id属性を設定する必要があります。以下のコード例をご覧ください。<canvas id = ne