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