HTML Canvas 渐变
HTML Canvas 渐变
渐变允许您显示两个或多个指定颜色之间的平滑过渡。
渐变可用于填充矩形、圆形、线条、文本等。
有两种方法用于创建渐变
-
createLinearGradient()- 创建线性渐变 -
createRadialGradient()- 创建径向/圆形渐变
createLinearGradient() 方法
createLinearGradient() 方法用于定义线性渐变。
线性渐变沿线性模式（水平/垂直/对角线）改变颜色。
createLinearGradient() 方法具有以下参数
| 参数 | 描述 |
|---|---|
| x0 | 必需。 起始点的 x 坐标 |
| y0 | 必需。 起始点的 y 坐标 |
| x1 | 必需。 终点的 x 坐标 |
| y1 | 必需。 终点的 y 坐标 |
渐变对象需要两个或多个颜色停止点。
addColorStop() 方法指定颜色停止点及其在渐变中的位置。位置可以在 0 和 1 之间。
要使用渐变，请将其分配给 fillStyle 或 strokeStyle 属性，然后绘制形状（矩形、圆形、形状或文本）。
示例
创建具有两个颜色停止点的线性渐变；渐变起始点的浅蓝色，渐变终点的深蓝色。然后，用渐变填充矩形
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// 创建线性渐变
const grad=ctx.createLinearGradient(0,0, 280,0);
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.createLinearGradient(0,0, 280,0);
grad.addColorStop(0, "lightblue");
grad.addColorStop(1, "darkblue");
// 用渐变填充带边框的矩形
ctx.lineWidth = 10;
ctx.strokeStyle = grad;
ctx.strokeRect(10,10,280,130);
</script>
自己动手试一试 »
示例
创建具有三个颜色停止点的线性渐变，渐变起始点的浅蓝色，渐变中间点的紫色，以及渐变终点的深蓝色。然后，用渐变填充矩形
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// 创建线性渐变
const grad=ctx.createLinearGradient(0,0, 280,0);
grad.addColorStop(0, "lightblue");
grad.addColorStop(0.5, "purple");
grad.addColorStop(1, "darkblue");
// 用渐变填充矩形
ctx.fillStyle = grad;
ctx.fillRect(10,10, 280,130);
</script>
自己动手试一试 »
垂直线性渐变
水平渐变从左到右，通过改变 x 轴上的参数（x1 和 x2）创建。上面的示例都是水平线性渐变。
垂直渐变从上到下，通过改变 y 轴上的参数（y1 和 y2）创建。
示例
通过改变 y 轴上的参数值（更改 y2）来创建垂直线性渐变
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// 创建线性渐变
const grad=ctx.createLinearGradient(0,0, 0,130);
grad.addColorStop(0, "lightblue");
grad.addColorStop(1, "darkblue");
// 用渐变填充矩形
ctx.fillStyle = grad;
ctx.fillRect(10,10, 280,130);
</script>
自己动手试一试 »
对角线性渐变
对角渐变通过改变 x 轴和 y 轴上的参数来创建。
示例
通过改变 x 轴和 y 轴上的参数（更改 x2 和 y2）来创建对角线性渐变
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// 创建线性渐变
const grad=ctx.createLinearGradient(0,0, 280,130);
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.createLinearGradient(0,0,280,0);
grad.addColorStop(0, "lightblue");
grad.addColorStop(1, "darkblue");
// 用渐变填充圆形
ctx.beginPath();
ctx.arc(145, 75, 65, 0, 2 * Math.PI);
ctx.fillStyle = grad;
ctx.fill();
</script>
自己动手试一试 »
用渐变填充文本
示例
这里我们用渐变填充文本
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// 创建线性渐变
const grad=ctx.createLinearGradient(0,0,280,0);
grad.addColorStop(0, "lightblue");
grad.addColorStop(1, "darkblue");
// 用渐变填充文本
ctx.font = "50px Arial";
ctx.fillStyle = grad;
ctx.fillText("Hello World",10,80);
</script>
自己动手试一试 »
用渐变填充带边框的文本
示例
这里我们用渐变填充带边框的文本
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// 创建线性渐变
const grad=ctx.createLinearGradient(0,0,280,0);
grad.addColorStop(0, "lightblue");
grad.addColorStop(1, "darkblue");
// 用渐变填充带边框的文本
ctx.font = "50px Arial";
ctx.strokeStyle = grad;
ctx.strokeText("Hello World",10,80);
</script>
自己动手试一试 »
