資料結構
網路
關係資料庫管理系統 (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 次瀏覽
廣告