HTML 5之前,要在HTML页面上动态生成图片,要么在服务器端生成位图后输出到HTML页面上显示,要么使用Flash等等第三方工具。HTML 5改变了这种局面,HTML 5新增了一个<canvas.../>
元素,这个元素本身的功能比较有限,但通过该元素可以获取一个CanvasRenderingContext2D对象,该对象是一个功能强大的绘图API。
本篇文章将会介绍HTML 5新增的绘图功能,包括绘制几何图形、绘制字符串、利用路径来绘制复杂的集合图形等。还会介绍图形变换、图形叠加、图形填充等内容。
一、使用canvas元素
<canvas.../>
元素只是绘制图形的容器,必须使用JavaScript脚本来绘制图形。
HTML 5页面上定义<canvas.../>
元素与定义其他普通元素并无任何不同,它除了可以指定id、style、class、hidden等通用属性之外,还可以指定如下两个属性。
- height:该属性设置画布组件高度。
- width:该属性设置画布组件宽度。
在HTML 网页上定义<canvas.../>
元素之后,它只是一张“空白”的画布,画布上面一片空白,一无所有。为了向<canvas.../>
元素上绘图,必须经过如下3步。
- 获取
<canvas.../>
元素对应的DOM对象,这是一个Canvas对象。 - 调用Canvas对象的getContext()方法,该方法返回一个CanvasRenderingContext2D对象,该对象即可绘制图形。
- 调用CanvasRenderingContext2D对象的方法绘图。
二、绘图
1. canvas绘图基础:CanvasRenderingContext2D
每个<canvas.../>
元素对应于一个Canvas对象,Canvas对象的getContext(String contextID)方法将会返回一个绘图API,该方法需要一个字符串参数,目前该方法只支持“2d”字符串作为参数,该方法将返回一个CanvasRenderingContext2D对象。
该对象提供了如下表所示的方法绘制各种图形。
除了上表所示的各种方法之外,CanvasRenderingContext2D还允许直接修改它的系列属性,这些属性主要用于控制各种绘图风格。CanvasRenderingContext2D提供的各种属性如下表所示。
在Canvas提供的绘制方法中还用到了一个API:Path,一个Path代表任意多条直线连接而成的任意图形,当Canvas根据Path绘制时,它可以绘制出任意的形状。