資料結構
網路
關係型資料庫管理系統
作業系統
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>
更新日期：15-06-2020
193 次瀏覽
廣告