資料結構
網路
關係型資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式語言
C++
C#
MongoDB
MySQL
JavaScript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學科
時尚學科
法律學科如何在 HTML5 中繪製圓形漸變？
此方法返回一個 CanvasGradient 物件，它表示沿著由引數表示的圓所給出的錐形繪製的徑向漸變。前三個引數定義一個圓，其座標為 (x1,y1) 半徑為 r1，第二個圓的座標為 (x2,y2) 半徑為 r2。
createRadialGradient(x0, y0, r0, x1, y1, r1)
以下是 createRadialGradient() 方法的引數值 −
| 序號 | 引數及說明 |
|---|---|
| 1 | x0 x 座標 - 漸變的起始點 |
| 2 | y0 y 座標 - 漸變的起始點 |
| 3 | r0 起始圓的半徑 |
| 4 | x1 x 座標 - 漸變的終止點 |
| 5 | y1 y 座標 - 漸變的終止點 |
6 | r1 終止圓的半徑 |
你可以嘗試執行以下程式碼來學習如何在 HTML5 中繪製圓形/徑向漸變 −
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Radial Gradient</title>
</head>
<body>
<canvas id="newCanvas" width="450" height="250" style="border:1px solid
#d3d3d3;"></canvas>
<script>
var c = document.getElementById("newCanvas");
var ctxt = c.getContext("2d");
var linegrd = ctxt.createRadialGradient(75, 50, 5, 90, 60, 100);
linegrd.addColorStop(0, "#FFFFFF");
linegrd.addColorStop(1, "#66CC00");
ctxt.fillStyle = linegrd;
ctxt.fillRect(20, 10, 200, 150);
</script>
</body>
</html>
更新於：2020 年 6 月 15 日
193 次瀏覽
廣告