如何在 HTML5 中绘制圆形渐变?
htmlweb developmentfront end technology
此方法返回一个 CanvasGradient 对象，该对象表示一个径向渐变，沿着由参数表示的圆所指定的圆锥体进行绘制。前三个参数定义了一个坐标为 (x1,y1) 、半径为 r1 的圆，第二个参数定义了一个坐标为 (x2,y2) 、半径为 r2 的圆。
createRadialGradient(x0, y0, r0, x1, y1, r1)
以下是 createRadialGradient() 方法的参数值 −
| S.No | 参数 &描述 |
|---|---|
| 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>
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
