本次更新的是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