資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會科學
時尚研究
法律研究如何使用 HTML5 建立彩虹
概覽
任務是用 HTML5 版本建立一個美麗的彩虹。彩虹由七種顏色組成，這七種顏色分別是：紫色、靛藍、藍色、綠色、黃色、橙色、紅色。這些顏色按自下而上的順序排列。所以我將使用 <svg> 可縮放向量圖形標籤來實現該任務，它能幫助我在 HTML 頁面中建立圖形形狀。在 svg 元素內，有一些元素可以用來繪製形狀。這些標籤有：rect、circle、ellipse、line、polyline、polygon 以及 path。
語法
用於建立彩虹的語法如下 −
<svg width="" height=""><svg> <circle cx="" cy="" r="" stroke="" fill="" />
svg 的寬度和高度已設定好，它是彩虹的框架。
circle 標籤包含四個屬性 cx、cy、r 和 fill ，其中 cx 是當前元素在網頁水平軸上的位置，cy 是當前元素在網頁垂直位置上的位置，r 表示圓的半徑（圓周的一半），fill 屬性設定圓的顏色。
演算法
步驟 1 − 在文字編輯器中建立 HTML 樣板。
步驟 2 − 建立具有高度和寬度的 div 容器，現在插入 svg 標籤元素並設定其寬度和高度作為父容器。
<svg width="500" height="150"></svg>
步驟 3 − 在 svg 標籤中插入形狀標籤元素，向其中新增屬性以設定圓的水平、垂直、半徑和顏色。
<circle cx="150" cy="150" r="140" stroke="" stroke-width="0" fill="red" />
步驟 4 − 重複第 3 步 7 次，以建立 7 種彩虹顏色。
<circle cx="150" cy="150" r="140" stroke="" stroke-width="0" fill="red" /> <circle cx="150" cy="150" r="120" stroke="none" stroke-width="1" fill="orange" /> <circle cx="150" cy="150" r="100" stroke="none" stroke-width="1" fill="yellow" /> <circle cx="150" cy="150" r="80" stroke="none" stroke-width="1" fill="green" /> <circle cx="150" cy="150" r="60" stroke="none" stroke-width="1" fill="blue" /> <circle cx="150" cy="150" r="40" stroke="none" stroke-width="2" fill="indigo" /> <circle cx="150" cy="150" r="20" stroke="none" stroke-width="1" fill="violet" />
步驟 5 − 虹成功建立。
示例
在給定示例中，我們在 svg 標記的幫助下建立了彩虹，其中最重要的標記是一個圓形，透過將中心定位到底部，使圓形成為彩虹的半圓。
<html>
<head>
<title>Rainbow</title>
</head>
<body>
<div style="margin: auto;width: fit-content;">
<svg width="500" height="150">
<circle cx="150" cy="150" r="140" stroke="" stroke-width="0"
fill="red" />
<circle cx="150" cy="150" r="120" stroke="none" stroke-width="1"
fill="orange" />
<circle cx="150" cy="150" r="100" stroke="none" stroke-width="1"
fill="yellow" />
<circle cx="150" cy="150" r="80" stroke="none" stroke-width="1"
fill="green" />
<circle cx="150" cy="150" r="60" stroke="none" stroke-width="1"
fill="blue" />
<circle cx="150" cy="150" r="40" stroke="none" stroke-width="2"
fill="indigo" />
<circle cx="150" cy="150" r="20" stroke="none" stroke-width="1"
fill="violet" />
</svg>
<h1>Rainbow using HTML5</h1>
</div>
</body>
</html>
結論
可伸縮向量圖形在不降低元件質量的情況下提供了元件質量。在上述示例中，svg 充當一個框架，其中在內部建立圖形元素。圓形在水平和垂直軸上的位置小於 svg 框架的寬度和高度。圓心座標 cx 和 cy 的預設位置或值為 0。
更新於：2023 年 4 月 11 日
2K+ 次瀏覽
廣告