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>
试试看 »
