HTML 画布 径向渐变
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>
自己试一试 »
