App下載

HTML如何繪制橢圓？

猿友 2021-03-19 15:03:29 瀏覽數(shù) (7552)
反饋

前幾日 W3Cschool 小編給大家介紹了 CSS 如何繪制基本圖形，其中簡述了畫橢圓的方法。今日我們來學(xué)習(xí)下 HTML 如何繪制基本圖形，這個方式更為簡單，方便上手。

我們先來看下實(shí)現(xiàn)效果：

HTML繪制橢圓

具體代碼：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>html畫圖形 - 編程獅(w3cschool.cn)</title>
</head>
<body>
    <svg width="500" height="250">
	<ellipse cx="200" cy="100" rx="150" ry="70" style="fill:red" />
    </svg>
</body>
</html>

標(biāo)簽?<svg></svg>?是 HTML5 的新標(biāo)簽之一，用來一些基本圖形。如矩形、直線、圓形等。

?<ellipse>?是用來畫橢圓的標(biāo)簽，只需要在 <svg></svg> 中插入 <ellipse> 標(biāo)簽即可繪制橢圓。

其中四個必須屬性分別是：

  • cx 屬性定義的橢圓中心的x坐標(biāo)
  • cy 屬性定義的橢圓中心的y坐標(biāo)
  • rx 屬性定義的水平半徑
  • ry 屬性定義的垂直半徑

另外還可以加上樣式如顏色填充，邊框等。

以上就是用 HTML 繪制橢圓的全部內(nèi)容。

更多 HTML 繪制圖形教程請閱讀：SVG教程。


HTML

0 人點(diǎn)贊