HTML5 画布 Canvas

本章介绍 HTML 中用来绘图的元素画布。它是 HTML5 中新增的元素，通过使用 JavaScript 调用画布的函数可以控制画布中的每个像素，用来生成图形、字符或者图像。画布元素本身没有绘图功能，初始化定义的画布没有任何视觉效果，必须通过 JavaScript 拿到画布的 id，然后控制画布的绘制功能。所以想要使用画布，必须对 JavaScript 有一定的了解。画布牵涉到很多知识点，本章介绍简单的画布创建以及几种简单的基础形状绘制。

1. 画布的历史

画布元素最早是 Safari 浏览器在 1.3 版本引入的，为了解决在 dashboard 组件中支持脚本控制的图形，之后 Firefox1.5 和 Opera9 先后支持了画布元素，目前画布已经是 HTML5 中正式的标签元素了。

2. 画布基础操作

2.1 创建画布

通过声明 Canvas 标签可以创建一个画布元素，Canvas 支持高度、宽度属性。

代码说明：如果当前你的浏览器不支持 Canvas 元素，则显示 Canvas 标签内的文字。
JavaScript 可以通过 Canvas 定义的 id 来寻找 Canvas 元素，进而操控它绘图。

var a = document.getElementById("test"); //根据id调用Canvas

2.2 坐标系

画布左上角(0,0)默认原点，x 坐标向右方增长，y 坐标则向下方延伸：

但是，Canvas 的坐标体系并不是一成不变的，原点是可改变的。坐标变换：可以对 Canvas 坐标系统进行移动 translate、旋转 rotate 和缩放等操作。坐标变换之后绘制的图形 x,y 偏移量都以新原点为准， 旋转角度，缩放比，以新坐标系角度为准。

2.3 获取画布 SDK 函数

声明完画布之后，画布标签本身除了高度和宽度之外基本上不再包含其他可以用于绘图的属性，所以想要操控画布必须获取到它提供的绘图 SDK 对象。

var context = a.getContext(contextID)

通过 getContext 函数可以获取画布的 SDK 对象，在 HTML 中它被称为 CanvasRenderingContext2D 对象。CanvasRenderingContext2D 提供了一系列用于绘图的函数，其中包含以下几大类。

• 颜色、样式、阴影
• 线条样式
• 矩形
• 路径
• 转换
• 文本
• 图像绘制
• 像素操作
• 合成
• 其他

2.4 创建一个矩形

通过函数 fillRectangle 可以创建一个矩形，使用 fillStyle 属性为矩形填充颜色。

2.5 绘制线条

使用 moveTo 函数定义线的开始坐标，lineTo 函数定义线的结束坐标，stroke 函数进行最终的绘制操作。

2.6 绘制圆形

使用 arc 可以画出一个圆形。

2.7 绘制文字

使用 strokeText 绘制文字。

2.8 绘制渐变

使用 createLinearGradient 方法可以绘制线性的渐变，适用于矩形、圆形、线条、文本等。

绘制渐变对象，必须使用两种或两种以上的颜色。停止颜色，使用 addColorStop 方法指定颜色停止，参数为 0 - 1

2.9 绘制阴影

使用 shadow 系列函数可以绘制阴影，shadowBlur 表示阴影效果如何延伸 double 值。浏览器在阴影运用高斯模糊时，将会用到该值，它与像素无关，只会被用到高斯模糊方程之中，其默认值为 0。shadowColor 定义颜色值，默认值是 rgba(0,0,0,0)。shadowOffsetX 定义阴影在 X 轴方向的偏移量，以像素为单位，默认值为 0，shadowOffsetY 定义阴影在 Y 轴方向的偏移量，以像素为单位，默认值是 0。

2.10 纹理填充

填充纹理原理上是指图案的重复，通过 createPattern() 函数进行初始化。有两个参数 ，第一个是 Image 实例，第二个是形状中如何显示 repeat 图案。可以使用这个函数加载图像或者整个画布作为形状的填充图案。

3. 画布实战- 五子棋小游戏

上述代码使用 HTML 的画布功能实现了一个简单的五子棋功能，其中除了用到画布还使用到了一些简单的数据结构和算法，比如判断棋局是否结束等。

4. 小结

本章介绍了 HTM5 中新增的绘图工具 Canvas，Canvas 的历史，以及通过几种简单的实操方式介绍了如何实际使用画布。