数据结构
网络
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+ 次浏览
广告