HTML Canvas - createRadialGradient() 方法

HTML Canvas 的createRadialGradient() 方法是CanvasRenderingContext2D 接口的一部分，可用于创建具有两个圆的尺寸和坐标的径向渐变。

语法

以下是 HTML Canvas createRadialGradient() 方法的语法：

CanvasRenderingContext2D.createRadialGradient(x, y, r, x1, y1, r1);

参数

以下是此方法的参数列表：

序号	参数及描述
1	x 起始圆的 x 坐标。
2	y 起始圆的 y 坐标。
3	r 起始圆的半径。
4	x1 结束圆的 x 坐标。
5	y1 结束圆的 y 坐标。
6	r1 结束圆的半径。

返回值

径向渐变应用于上下文对象的形状，并呈现到 Canvas 元素。

示例

以下示例演示了使用 HTML Canvas createRadialGradient() 方法通过两个颜色停止点创建径向渐变。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="300" height="200" style="border: 1px solid black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      var radialgrad = context.createRadialGradient(25, 25, 25, 50, 50, 25);
      radialgrad.addColorStop(0.9, 'pink');
      radialgrad.addColorStop(0.85, 'grey');
      context.fillStyle = radialgrad;
      context.fillRect(10, 10, 200, 150);
   </script>
</body>
</html>

输出

上述代码在网页上返回的输出为：

示例

以下示例使用了三个颜色停止点，并将径向渐变应用于 Canvas 元素中可用的上下文对象。应用样式的对象将呈现到 Canvas 元素上。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="300" height="200" style="border: 1px solid black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      var radialgrad = context.createRadialGradient(25, 25, 50, 100, 80, 50);
      radialgrad.addColorStop(0, 'green');
      radialgrad.addColorStop(0.5, 'purple');
      radialgrad.addColorStop(1, 'cyan');
      context.fillStyle = radialgrad;
      context.fillRect(10, 10, 200, 150);
   </script>
</body>
</html>

输出

上述代码在网页上返回的输出为：

html_canvas_colors_and_styles.htm

打印页面