html5怎么绘制径向渐变

在 HTML5 中，可以使用 Canvas API 绘制径向渐变。Canvas API 提供了 createRadialGradient() 方法来创建径向渐变对象。

createRadialGradient() 方法的语法如下：

context.createRadialGradient(x0, y0, r0, x1, y1, r1);

其中，(x0, y0) 表示渐变的起始点，r0 表示起始点的半径，(x1, y1) 表示渐变的结束点，r1 表示结束点的半径。

接下来，可以使用 addColorStop() 方法来为渐变对象添加颜色。addColorStop() 方法的语法如下：

gradient.addColorStop(stop, color);

其中，stop 参数表示颜色的位置，范围在 0.0（起始位置）和 1.0（结束位置）之间，color 参数表示颜色值。

下面是一个绘制径向渐变的例子：

<canvas id="myCanvas" width="200" height="200"></canvas>

<script>
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");

  // 创建径向渐变对象
  var gradient = ctx.createRadialGradient(100, 100, 50, 100, 100, 100);

  // 添加颜色
  gradient.addColorStop(0, "red");
  gradient.addColorStop(1, "white");

  // 绘制圆形
  ctx.beginPath();
  ctx.arc(100, 100, 100, 0, 2 * Math.PI);
  ctx.fillStyle = gradient;
  ctx.fill();
</script>

这个例子中，先创建了一个半径为 50 到 100 的径向渐变对象，起始点和结束点都在圆心位置。然后，使用 addColorStop() 方法为渐变对象添加了两个颜色。最后，使用 fillStyle 属性将渐变对象设置为圆形的填充样式，绘制了一个填充有径向渐变的圆形。