径向渐变 HTML5 标签
html5web developmentfront end technology
从一种色调到另一种色调的渐进变化被称为渐变。它让设计师能够创造一种新的色调。渐变赋予设计新的层次和真实感，帮助物体脱颖而出。
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(结束)
color 是用于添加颜色的 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>
输出
运行上述脚本后，将弹出输出窗口，触发应用了两个色标的径向渐变，并在事件触发时分割并显示在网页上。
示例
让我们看下面的示例，其中我们绘制了一个应用了径向渐变的椭圆。
<!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>
输出
当脚本执行时，它将生成一个输出，该输出由一个用径向渐变绘制并添加了两个颜色偏移的椭圆组成，并使其显示在网页上。
