数据结构
网络
关系型数据库管理系统 (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 次浏览
广告