数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学径向渐变 HTML5 标签
从一种色调逐渐过渡到另一种色调的过程称为渐变。它允许设计师创造出实际上全新的色调。通过为设计增加层次感和真实感，渐变有助于突出对象。
在HTML中，我们可以找到三种类型的渐变，但我们即将执行的任务是关于径向渐变。让我们讨论一下，以便更好地理解径向渐变 HTML5 标签。
径向渐变
径向渐变与线性渐变不同。它从一个中心点向外辐射。默认情况下，渐变将具有椭圆形，最大的角，从元素中间的第一个颜色开始，逐渐淡化为接近元素边缘的最后一个颜色。除非指定，否则淡化频率相同。
语法
以下是HTML中径向渐变的语法
var gradient=ctx.createradialgradient(x0,y0,r0,x1,y1,r1);
其中，
x0 - x 坐标的原点
y0 - y 坐标的原点
ro - 开始圆的半径
x1 - x 终点坐标
y1 - y 终点坐标
r1 - 结束圆的半径是 r1。
为了定义渐变，我们需要添加至少两个颜色停止点。为此，我们使用 addcolorstop() 方法。
语法
以下是渐变颜色停止点的语法。
gradient.addcolorstop(offset,color);
偏移量只不过是 0.0 到 1.0 之间的浮点数 (0.0（开始）1.0（结束）)
颜色是用于添加颜色的 CSS 属性
让我们来看下面的例子，以便更好地理解 HTML 中的径向渐变
示例
在下面的示例中，我们创建了具有均匀间隔颜色停止点的径向渐变。
<!DOCTYPE html>
<html>
<head>
<title>CSS Gradients</title>
<style>
#article {
height: 350px;
width: 700px;
background-color: white;
background-image: radial-gradient(#D1F2EB ,#fff, #BB8FCE );
}
.tutorial {
text-align: center;
font-size: 40px;
font-weight: bold;
padding-top: 80px;
}
.tutorial1 {
font-size: 17px;
text-align: center;
}
</style>
</head>
<body>
<div id="article">
<div class="tutorial">Tutorialspoint</div>
<div class="tutorial1">
The Best E-Way Learing
</div>
</div>
</body>
</html>
输出
当脚本执行时，它将生成一个输出，其中包含带有径向渐变的文本，该文本带有三个颜色停止点，在网页上形成椭圆形图案。
示例
考虑另一个示例，我们在此运行脚本来说明径向渐变。
<!DOCTYPE html>
<html>
<head>
<title>Radial Gradient</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="200" style="border:1px solid
#d3d3d3;"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctxt = c.getContext("2d");
var gradient = ctxt.createRadialGradient(55, 65, 4, 75, 90, 100);
gradient.addColorStop(0, "#6C3483");
gradient.addColorStop(1, "#D7DBDD");
ctxt.fillStyle = gradient;
ctxt.fillRect(35, 45, 205,150 );
</script>
</body>
</html>
输出
运行上述脚本后，输出窗口将弹出，触发径向渐变，该渐变应用于两个颜色停止点，在事件触发时被分割并在网页上显示。
示例
让我们来看下面的例子，我们在这里绘制了一个应用了径向渐变的 <ellipse>。
<!DOCTYPE html>
<html>
<head>
<style>
#svgelem{
position: relative;
left: 50%;
-webkit-transform: translateX(-40%);
-ms-transform: translateX(-40%);
transform: translateX(-40%);
}
</style>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2 align="center">HTML5 SVG Gradient Ellipse</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="gradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(200,200,200); stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(0,0,255); stop-opacity:1"/>
</radialGradient>
</defs>
<ellipse cx="100" cy="50" rx="100" ry="50" style="fill:url(#gradient)" />
</svg>
</body>
</html>
输出
当脚本执行时，它将生成一个输出，其中包含一个绘制的椭圆，并添加了两个颜色偏移量，使其在网页上显示。
更新于：2023年10月11日
63 次浏览
广告