如何使用 HTML5 创建彩虹

html5web developmentfront end technology更新于 2024/3/22 0:12:17

概述

我们的任务是使用 HTML5 版本创建一道美丽的彩虹。彩虹由七种颜色组成，分别是紫色、靛蓝色、蓝色、绿色、黄色、橙色和红色。这些颜色以自下而上的方式排列。为了完成这项任务，我们将使用 <svg> 可缩放矢量图形标签，它可以帮助我们在 HTML 页面中创建图形形状。在 svg 元素中，我们可以使用几个元素来绘制形状。这些标签包括:矩形、圆形、椭圆形、直线、折线、多边形和路径。

语法

创建彩虹的语法是 −

<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 标签中插入 shape 标签元素，并添加属性以设置圆形的水平、垂直方向、半径和颜色。

<circle cx="150" cy="150" r="140" stroke="" stroke-width="0" fill="red" />

步骤 4 − 重复步骤 3 七次，即可得到彩虹的七种颜色。

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