如何在HTML5中绘制圆形渐变？

  • Z时代
  • 2024-01-10
  • 分类：综合

此方法返回一个CanvasGradient对象，该对象表示一个径向渐变，该渐变沿自变量表示的圆所给定的圆锥形绘制。前三个自变量定义一个坐标为(x1,y1)和半径为r1的圆，第二个自变量定义一个坐标为(x2,y2)和半径r2的圆。

createRadialGradient(x0, y0, r0, x1, y1, r1)

这是方法的参数值createRadialGradient()-

序号
参数及说明
1
00x坐标-渐变的起点
2
00y-坐标-渐变的起点
3
00起始圆的半径
4
x1x坐标-渐变的终点
5
11y-坐标-渐变的终点
611终点圆的半径


您可以尝试运行以下代码，以了解如何在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>

以上是 如何在HTML5中绘制圆形渐变？ 的全部内容， 来源链接： utcz.com/z/347106.html

回到顶部