HTMLで点線を作る方法

HTML で点線を作成するには 3 つの方法があります: CSS 境界線スタイル プロパティ: 点線を作成するには、破線または点線の値を使用します。 SVG 要素: ストローク-dasharray 属性を使用して破線を作成し、破線または点の長さと間隔を制御します。 Canvas 要素: setLineDash() メソッドを使用して破線を作成すると、柔軟性が高まります。

#HTML で点線を作成する方法

CSS の使用 border-style プロパティ

これは、HTML と CSS を使用して破線を作成する最も一般的な方法です。

border-style プロパティは、破線を作成するために次の値を受け入れます。

• dashed: ダッシュで構成される破線を作成します。
• dotted: ドットで構成される点線を作成します。

例:

<code class="html"><p style="border: 1px dashed black;">虚线段落</p></code>

SVG 要素の使用

SVG 要素 (

および ) を使用して、ストローク-dasharray プロパティを使用して破線を作成できます。 ストローク-dasharray 破線のダッシュまたはドットの長さと間隔を表す値の配列を受け入れます。

例:

<code class="html"><svg width="100" height="100">
  <line x1="0" y1="0" x2="100" y2="100" stroke-dasharray="5 10" />
</svg></code>

Canvas 要素の使用

Canvas 要素は、JavaScript API を使用して破線を作成します。

getContext() メソッドは、setLineDash() メソッドを提供するキャンバス コンテキスト オブジェクトを返します。

例:

<code class="html"><canvas id="canvas" width="100" height="100"></canvas>

<script>
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");

  ctx.setLineDash([5, 10]);
  ctx.beginPath();
  ctx.moveTo(0, 0);
  ctx.lineTo(100, 100);
  ctx.stroke();
</script></code>

方法の選択

最適な破線の作成方法の選択は、特定のニーズによって異なります。 CSS

border-style プロパティは最も単純な方法ですが、SVG 要素と Canvas 要素を使用するとより柔軟な方法が得られます。

以上がHTMLで点線を作る方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。