1.6 图形绘制
HTML 5新增的一个重要功能就是在网页上进行动态绘图，通过使用canvas、SVG元素，可以在网页上呈现绘制的图形、矢量图等，使网页具有更好的可视化效果。
1.6.1 canvas绘图
在HTML页面中添加canvas元素，相当于在页面上创建了一块矩形的画布，在画布上可以绘制各种图形。
canvas元素默认的画布大小为宽300像素，高150像素，也可以用width和height属性定义画布的宽度、高度。canvas默认没有边框，可以用style属性添加边框，例如：
在代码段中用style属性为canvas画布设置了一个实线描边的边框，浏览器中的效果如图1-41所示。
在画布中需要根据坐标来绘制图形，画布中的坐标与传统的笛卡尔坐标有所不同，在画布中，坐标原点位于左上角，从坐标原点出发，水平方向为X轴，垂直方向为Y轴，如图1-42所示。
canvas元素本身不能进行图形绘制，需要使用JavaScript脚本代码完成图形绘制。脚本代码可以用script元素定义。script元素既可包含脚本语句，也可通过src属性指向外部脚本文件。在HTML 5中，script元素的type属性不再是必需的，默认值是“text/javascript”。例如：
图1-41 canvas画布效果
图1-42 canvas画布坐标系
1.绘制图形的基本步骤
1）添加canvas元素。需要注意的是，canvas元素必须定义id属性以作为标识供JavaScript调用，例如：
2）使用JavaScript来绘制图形。
在JavaScript脚本代码中使用document.getElementById()方法，由canvas元素的id值获取canvas，并创建对象。
使用canvas的getContext()方法获取画布的上下文，创建context对象，获取允许图形绘制的2D环境。
context对象具有多种绘制线、矩形、圆、文字以及图像的方法。例如，用context对象绘制一个矩形。
其中，context对象的fillStyle属性用于设置矩形的填充色，fillRect()方法定义了矩形的位置和尺寸，绘制矩形的起始点（50,50）由前两个参数值定义，矩形的宽度100像素和高度50像素分别由后两个参数值定义。
完整的示例代码如下。
【例1-7】 canvas绘制矩形。
以上代码在浏览器中显示效果如图1-43所示。
2.canvas图形
canvas基本图形即线、矩形、圆等简单图形。
在canvas中绘制直线需要用到三个步骤。
1）moveTo(x,y)：定义直线起始坐标。
2）lineTo(x,y)：定义直线结束坐标。
3）stroke()：实际绘制出一条路径（默认黑色）。
例如：
在上面的代码中，stroke()方法绘制的是通过moveTo()和lineTo()方法定义的直线。
在浏览器中的显示效果如图1-44所示。
图1-43 canvas绘制矩形
图1-44 canvas绘制直线
在canvas中绘制矩形的方法在前面已举例说明，在此不做赘述。
绘制圆形可能会用到五个步骤。
1）beginPath()：开始一条路径。
2）arc(x,y,r,sAngle,eAngle,counterclockwise)：创建弧线或圆。
3）closePath()：创建从当前点到开始点的路径。
4）fill()：填充当前的路径或图像（默认黑色）。
5）stoke()：实际绘制出一条路径（默认黑色）。
arc(x,y,r,sAngle,eAngle,counterclockwise)方法的参数：x,y定义了圆心的坐标；r为半径；sAngle为起始角，eAngle为结束角，单位为弧度；counterclockwise为可选参数，设定绘制弧线或圆的方向是顺时针还是逆时针，设为true为逆时针，设为false为顺时针。
例如用canvas绘制圆弧。
图1-45 canvas绘制圆弧
在浏览器中显示效果如图1-45所示。
如果要绘制圆，将arc()函数的起始角设为0，结束角设为Math.PI*2。
3.渐变
渐变可以定义不同的颜色填充在矩形、圆形、线条、文本等对象内。有两种不同的方式来设置canvas渐变，一种是线性渐变，另一种是径向渐变。渐变用到的方法如下。
1）createLinearGradient(x0,y0,x1,y1)：创建线条渐变。
2）createRadialGradient(x0,y0,r0,x1,y1,r1)：创建一个径向/圆渐变。
3）addColorStop(stop,color)：定义色标的位置并上色。
createLinearGradient(x0,y0,x1,y1)方法的参数：x0和y0为渐变起始点坐标；x1和y1为渐变结束点坐标。
createRadialGradient(x0,y0,r0,x1,y1,r1)方法的参数：x0和y0为渐变起始圆的圆心坐标；r0为起始圆的半径；x1和y1为渐变结束圆的圆心坐标；r1为结束圆的半径。
addColorStop(stop,color)方法的参数：stop为渐变起始点与结束点的相对位置，取值范围为0.0到1.0之间，起始点为0.0，结束点为1.0；color用于设定结束位置的颜色。例如：
在浏览器中显示效果如图1-46所示。
4.绘制文字
使用canvas绘制文字需要用到的方法如下。
1）fillText(text,x,y,maxwidth)：在canvas上绘制实心的文字。
2）strokeText(text,x,y,maxwidth)：在canvas上绘制空心的文字。
fillText()和strokeText()方法的参数：text定义了在画布上输出的文字；x和y定义了开始绘制文字的x、y坐标；maxWidth为可选参数，定义了允许的最大文本宽度，单位为像素。绘制文字的默认颜色是黑色。
使用canvas绘制文字需要用到的属性如下。
1）font：定义绘制文字的样式，如字体、字号等，其语法与CSS指定字体样式的方法相同。
2）textAlign：定义绘制文字的对齐方式。
3）textBaseline：定义绘制文字的基线。
例如：
在浏览器中的显示效果如图1-47所示。
图1-46 canvas渐变
图1-47 canvas绘制文字
5.绘制图像
canvas可以导入图像，对导入的图像进行更改大小、裁剪、合成等处理。把一幅图像放置到画布上，可使用drawImage()方法，有三种语法可实现此功能。
● drawImage(img,x,y)：在画布上放置图像。
● drawImage(img,x,y,width,height)：在画布上放置图像，并设置图像宽度和高度。
● drawImage(img,sx,sy,swidth,sheight,x,y,width,height)：裁剪图像，定位被裁剪的部分。
为了解决图像预加载问题，还可以使用onload事件，在加载图像的同时执行图像绘制。下面的示例演示了如何将图像添加到画布，并更改大小。
【例1-8】 canvas图像绘制。
在浏览器中显示效果如图1-48所示。
图1-48 canvas绘制图像
1.6.2 SVG绘图
SVG指可缩放矢量图形（Scalable Vector Graphics）。SVG是W3C发布的标准，用于在页面上绘制矢量图形。与其他的图像格式如JPEG、PNG等相比，SVG所绘制的矢量图形的质量在缩放或改变大小时不会有损失。
与canvas通过JavaScript来绘制2D图形不同，SVG是一种通过XML（标准通用标记语言的子集）描述2D图形的语言。canvas绘制矩形需要嵌入JavaScript，而在SVG中用<rect>元素就可以绘制矩形。
<rect>元素的常用属性如下。
● x：矩形左上角的x坐标。
● y：矩形左上角的y坐标。
● rx：圆角矩形的x半径。
● ry：圆角矩形的y半径。
● width：矩形宽度。
● height：矩形高度。
例如下面的代码用rect元素创建一个圆角矩形。
在浏览器中显示效果如图1-49所示。
SVG除了可绘制各种如线、圆、椭圆、多边形、矩形等图形外，还支持多种图形显示效果如滤镜、渐变、模糊效果等。所有的SVG滤镜都包含在<defs>元素内，<filter>元素用来定义滤镜，各种滤镜效果用id属性作为标识，在图形创建时通过id来确定图形应用哪种滤镜。例如，用<feGaussianBlur>元素实现模糊效果。
【例1-9】 SVG滤镜模糊效果。
如【例1-9】所示，<filter>用id属性定义了一个滤镜的唯一标识f1，<feGaussianBlur>元素定义了模糊效果，其中，in属性的值定义为“SourceGraphic”表示由整个图像创建效果，stdDeviation属性定义了模糊量，在<rect>元素中用filter属性将矩形图形与“f1”建立映射。
示例代码在浏览器中的显示效果如图1-50所示。
图1-49 SVG绘制圆角矩形
图1-50 SVG滤镜模糊效果