HTML Canvas 径向渐变
createRadialGradient() 方法
createRadialGradient() 方法用于定义一个径向/圆形渐变。
径向渐变由两个假想圆定义：一个起始圆和一个结束圆。渐变从起始圆开始，向结束圆移动。
createRadialGradient() 方法具有以下参数：
| 参数 | 描述 |
|---|---|
| x0 | 必需。起始圆的 x 坐标 |
| y0 | 必需。起始圆的 y 坐标 |
| r0 | 必需。起始圆的半径 |
| x1 | 必需。结束圆的 x 坐标 |
| y1 | 必需。结束圆的 y 坐标 |
| r1 | 必需。结束圆的半径 |
渐变对象需要两个或更多颜色停止点。
addColorStop() 方法指定颜色停止点及其在渐变中的位置。位置可以在 0 和 1 之间。
要使用渐变，请将其分配给 fillStyle 或 strokeStyle 属性，然后绘制形状（矩形、圆形、形状或文本）。
示例
使用两个颜色停止点创建径向/圆形渐变；起始圆为浅蓝色，结束圆为深蓝色。起始圆的中心位于 (150,75) 位置，半径为 15 像素。结束圆的中心位于 (150,75) 位置，半径为 150 像素。然后，用渐变填充矩形。
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// 创建渐变
const grad=ctx.createRadialGradient(150,75,15,150,75,150);
grad.addColorStop(0,"lightblue");
grad.addColorStop(1,"darkblue");
// 用渐变填充矩形
ctx.fillStyle = grad;
ctx.fillRect(10,10,280,130);
</script>
自己动手试一试 »
示例
在这里，我们将结束圆的半径设置为一个较小的数字 (100)，可以看到径向/圆形渐变会变小。
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// 创建渐变
const grad=ctx.createRadialGradient(150,75,15,150,75,100);
grad.addColorStop(0,"lightblue");
grad.addColorStop(1,"darkblue");
// 用渐变填充矩形
ctx.fillStyle = grad;
ctx.fillRect(10,10,280,130);
</script>
自己动手试一试 »
示例
在这里，我们移动结束圆的中心点以获得新的外观。
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// 创建渐变
const grad=ctx.createRadialGradient(150,75,15,180,95,100);
grad.addColorStop(0,"lightblue");
grad.addColorStop(1,"darkblue");
// 用渐变填充矩形
ctx.fillStyle = grad;
ctx.fillRect(10,10,280,130);
</script>
自己动手试一试 »
示例
在这里，我们向渐变添加一个额外的颜色停止点以获得新的外观。
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// 创建渐变
const grad=ctx.createRadialGradient(150,75,15,150,75,150);
grad.addColorStop(0,"lightblue");
grad.addColorStop(0.3,"pink");
grad.addColorStop(1,"darkblue");
// 用渐变填充矩形
ctx.fillStyle = grad;
ctx.fillRect(10,10,280,130);
</script>
自己动手试一试 »
