1. 绘制矩形
- 语法如图示例：
- 完整代码清空
2. 透明度
fillStyle = rgba(r, g, b, alpha)
3. 渐变
渐变分为线性渐变(linear gradients)和放射性渐变(radial gradients)。
3.1 线性渐变
下面示例中青色线段为线性渐变参考线，渐变色将以此条线段为基础进行渐变，A(ax, ay)为起点，B(bx, by)为终点。
- 步骤一：设置渐变线段
var gradient = context.createLinearGradient(ax, ay, bx, by);
1
- 步骤二：设置渐变点
gradient = addColorStop(0, "blue");
// 略...
gradient = addColorStop(1, "yellow");
1
2
3
2
3
- 步骤三：设置填充、绘制
context.fillStyle = gradient;
context.fillRect(start_x, start_y, rect_width, rect_heigh);
1
2
2
- 完整代码重置
3.2. 放射性渐变
线性渐变基于一条线段，放射性渐变基于两个圆形。
- 步骤一：设置渐变圆
var gradient = context.createRadialGradient(ax, ay, ar, bx, by, br);
1
- 步骤二：设置渐变色
gradient = addColorStop(0, "blue");
// 略...
gradient = addColorStop(1, "yellow");
1
2
3
2
3
- 步骤三：设置填充、绘制
context.fillStyle = gradient;
context.fillRect(start_x, start_y, rect_width, rect_heigh);
1
2
2
- 完整代码重置
4. 平铺模式(Pattern)
类似CSS中background-repeat概念，我们可以对绘制图形进行平铺设置。
- 步骤一：设置平铺模式
var pattern = context.createPattern(
image/canvas/text,
["repeat" | "repeat-x" | "repeat-y" | "no-repeat"]
);
1
2
3
4
2
3
4
- 步骤二：设置填充模式、渲染
context.fillStyle = pattern;
context.fillRect(start_x, start_y, rect_width, rect_heigh);
1
2
2
- 完整代码
repeat repeat-x repeat-y no-repeat
5. 阴影效果
当在canvas上绘制图形(shapes)、文本(text)、图像(image)，都可以设置阴影。属性如下：
shadowColor: 阴影颜色shadowOffsetX: 水平方向偏移shadowOffsetY: 垂直方向偏移shadowBlur: 模糊半径
TIP
可对比 CSSS3中box-shadow语法，如下：box-shadow: offset-x | offset-y | blur-radius | spread-radius | color;