So Beautiful 旅程——HTML5的绘图支持

本次更新的是HTML强大的绘图功能，我已经被它如此的性感所俘获，你还等什么!!!

第四章 HTML5的绘图支持

一、使用canvas元素

HTML新增了一个canvas元素，专门用于绘制图形，但实际上该元素自身并不绘制图形，只相当于一张空画布，要想画图，必须借助JavaScript脚本进行绘制

向<canvas>元素上画图，需要经过三个步骤：

获取<canvas>元素对应的DOM对象，这是一个Canvas对象；

调用Canvas对象的getContext()方法，返回一个CanvasRenderingContext2D对象；

利用CanvasRenderingContext2D对象的方法画图。

代码：



效果预览：

二、绘图

1.canvas绘图基础：CanvasRenderingContext2D

HTML5绘图的组件是Canvas对象，但是绘图的核心API是CanvasRenderingContext2D，他提供了一系列的方法和属性供绘制图形使用

2.绘制几何图形

fillRect：填充一个矩形

strokeRect：绘制一个矩形边框

CanvasRenderingContext2D只提供了这两个绘制几何图形的方法，并没有提供绘制其他几何图形的方法

代码：



效果预览：

3.绘制字符串

fillText：填充字符串

strokeText：绘制字符串边框

字体的对齐方式：

textAlign：水平对齐方式

textBaseAlign：垂直对齐方式

代码：



预览效果：

4.设置阴影

shadowBlur：阴影的模糊度

shadowColor：阴影的颜色

shadowOffsetX：阴影在X方向的偏移

shadowOffsetY：阴影在Y方向的偏移

代码：



预览效果：

5.使用路径

为了在Canvas上绘制更加复杂的图形，必须在Canvas上启用路径，借助路径来绘制图形

按如下步骤：

调用CanvasRenderingContext2D的beginPath()方法开始定义路径

调用CanvasRenderingContext2D的各种方法添加子路径

调用CanvasRenderingContext2D的closePath()方法关闭路径

调用CanvasRenderingContext2D的fill()或者stroke()方法来填充路径或者绘制路径边框

CanvasRenderingContext2D提供了如下方法添加子路径：

arc(x,y,radius,startAngle,endAngle,counterclockwise(boolean值，true为逆时针))：添加一段弧

arcTo(x1,y1,x2,y2,radius)：添加一段弧,确定这段圆弧的方式是假设从当前点到P1(x1,y1)绘制一条线条，再从P1(x1,y1)到P2(x2,y2)绘制一条线条，arcTo()则绘制一段同时与上面两条线条相切，且半径为radius的圆弧

bezierCurveTo:贝济埃曲线

lineTo(x,y):添加一段线段

moveTo(x,y)：移动到(x,y)

quadraticCurveTo：二次曲线

rect(x,y,width,height):添加一个矩形

代码：



预览效果：



代码：



预览效果：



代码：



预览效果：

6.绘制曲线

bezierCurveTo:贝济埃曲线

quadraticCurveTo：二次曲线

代码：



预览效果:

7.绘制位图

drawImage方法

该方法需要传入Image对象，创建Image对象采用如下方法：

Image img = new Image([width,height]);

img.src = "图片地址";

需要指出的是为Image对象的src属性赋值后，Image对象会去装载指定图片，这种装载是异步的，需要一定的时间开销，为保证图片装载完成之后才去绘制，可用如下代码来绘制：

Image img = new Image([width,height]);

img.src = "图片地址";

img.onload = function(){

//在该函数里绘制

}

代码：



预览效果：

三、图形特效处理

1.使用坐标变换

translate:平移坐标系统

scale：缩放坐标系统（水平方向上缩放sx,垂直方向上缩放sy）

totate：旋转坐标系统

还提供了save和restore方法，避免多次坐标变换后累加结果

需要指出的是save方法保存的绘图状态，不仅包括当前系统的坐标状态，还包括填充风格、线条风格等各种绘图状态，但是不包括Canvas上绘制的图形

代码：



预览效果:

2.坐标变换与路径结合使用

雪花飘飘的动态效果：

代码：



预览效果：

3.使用矩阵变换

CanvasRenderingContext2D提供了一种更加通用的坐标变换方法：

transform(m11,m12,m21,m22,dx,dy)这是一个基于矩阵变换的方法，前面三个变换方法都可以通过transform来实现，只是比较复杂

{x,y}------>{x*m11+y*m21+dx,x*m12+y*m22+dy}

实现自定义变换---倾斜变换：

对于倾斜变换而言，Y坐标无需变换，只要将X坐标横向移动tan(angle)*Y即可，这就是实现倾斜变换的理论基础

四.控制叠加风格

通过CanvasRenderingContext2D的globalCompositeOperation属性来实现

代码：



预览效果：

五.控制填充风格

除了fillStyle，CanvasRenderingContext2D还支持渐变填充(CanvasGradient)和位图填充(CanvasPattern)

1.线性渐变

调用CanvasRenderingContext2D的createLinearGradient方法创建一个线性渐变，返回一个CanvasGradient对象；

调用CanvasGradient对象的addColorStop方法向线性渐变中添加颜色变化；

将CanvasGradient对象赋给CanvasRenderingContext2D的fillStyle或strokeStyle属性。

代码：



预览效果：

2.圆形渐变

createRadialGradient

代码：



预览效果：

3.位图填充

createPattern

代码：



预览效果：

六、位图处理

1.位图裁剪

clip这个方法会把位图当前路径裁剪下来：

将要裁剪的部分定义成Canvas路径；

调用CanvasRenderingContext2D的clip方法把路径裁剪下来；

绘制位图---被裁剪部分才会显示。

代码：



预览效果：

2.像素处理

getImageData(int x,int y,int width,int height):该方法获取从Canvas上从(x,y)点开始，宽为width，高为height的图片区域的数据，该方法返回值是一个CanvasPixelArray对象（包含width、height、data属性，data[r1,g1,b1,a1,r2,g2,b2,a2,...,rN,gN,bN,aN],每四个元素确定一个像素点）

putImageData(CanvasPixelArray data,x,y):把data里的数据放入Canvas中从(x,y)开始的区域，该方法直接改变Canvas上的图像数据

通过以上两种像素处理方法，可以对图片进行各种复杂的处理，例如改变图片透明度、高亮、剪切、复制等；如果配合一些算法理论，甚至可以对图片进行模糊、降噪等复杂的滤波处理。

1）带透明度的画图

代码：



预览效果：



2）高亮画图：

所谓高亮就是把图片像素的R、G、B值都按比例放大

代码：



预览效果：

七、输出位图

toDataURL(String type):type是MIME字符串

DataURL格式是一种保存二进制文件的方式，我们既可把图片转换为DataURL格式的字符串，也可把DataURL格式的字符串恢复成原来的文件

代码：



预览效果：



实际上，Canvas可以把图片转换成DataURL格式的字符串，这个字符串既可以通过网络传输，也可以保存到磁盘、数据库中，这样就可以永久保存使用Canvas绘制的图片了.

注：以上代码摘录于《疯狂HTML5/CSS3/JavaScript讲义》；

这篇文章主要是对这些章节进行了分类和归纳，如果您需要更加详细的信息，可以查阅《疯狂HTML5/CSS3/JavaScript讲义》这本书，或登陆登陆：http://www.crazyit.org