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

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

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

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

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

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

基础教程