Skip to main content

Canvas 渐变与阴影

一、Canvas 渐变​

1、线性渐变​

ctx.createLinearGradient(x1, y1, x2, y2)

用于创建线性渐变对象，参数如下：

  • x1、y1：起点坐标；
  • x2、y2：终点坐标。
linearGradient.addColorStop(offset, color)

用于给渐变对象添加渐变色，参数如下：

  • position：0.0 到 1.0 之间的数值，表示渐变色的相对位置；
  • color：有效的 CSS 颜色值。

创建线性渐变完整步骤如下：

  1. 调用 createLinearGradient() 创建一个线性渐变对象 linearGradient；
  2. 对 linearGradient 对象调用 addColorStop() 方法 N 次，第 1 次表示渐变开始的颜色，第 2 次表示渐变结束的颜色，第 3 次则以第 2 次渐变色作为开始颜色，进行渐变，依此类推；
  3. 把 linearGradient 对象赋值给 ctx.fillStyle，并调用 fillRect() 方法来绘制有渐变色的图形。

示例-双色渐变：

const linearGradient = ctx.createLinearGradient(0, 0, 200, 150);

linearGradient.addColorStop(0, "#000");
linearGradient.addColorStop(1, "#fff");

ctx.fillStyle = linearGradient;
ctx.fillRect(0, 0, 200, 150);

效果如下：

示例-多色渐变：

const linearGradient = ctx.createLinearGradient(0, 0, 200, 0);

linearGradient.addColorStop(0, "#999");
linearGradient.addColorStop(0.25, "#fff");
linearGradient.addColorStop(0.5, "#999");
linearGradient.addColorStop(0.75, "#fff");
linearGradient.addColorStop(1, "#999");

ctx.fillStyle = linearGradient;
ctx.fillRect(0, 0, 200, 150);

效果如下：

2、径向渐变​

ctx.createRadialGradient(x1, y1, r1, x2, y2, r2)

用于创建径向渐变对象，参数如下：

  • x1、y1、r1：一个以 (x1,y1) 为原点，半径为 r1 的圆；
  • x2、y2、r2：一个以 (x2,y2) 为原点，半径为 r2 的圆。

创建径向渐变步骤与线性渐变相同，示例如下：

const radioGradient = ctx.createRadialGradient(50, 50, 10, 60, 60, 30);

radioGradient.addColorStop(0, "#000");
radioGradient.addColorStop(0.9, "#fff");
radioGradient.addColorStop(1, "#333");

ctx.fillStyle = radioGradient;
ctx.fillRect(0, 0, 200, 150);

效果如下：

二、Canvas 阴影​

  • shadowOffsetX：阴影的水平延伸距离，默认为 0。大于 0 向右偏移，小于 0 向左偏移；
  • shadowOffsetY：阴影的垂直延伸距离，默认为 0。大于 0 时向下偏移，小于 0 时向上偏移；
  • shadowBlur：阴影的模糊值，默认为 0；
  • shadowColor：阴影颜色，默认黑色。

示例：

ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 12;
ctx.shadowBlur = 20;
ctx.shadowColor = "rgba(0, 0, 0, 0.2)";

ctx.fillStyle = 'pink'
ctx.fillRect(20, 20, 80, 80)

效果如下：