Canvas入门（3）:图像处理和绘制文字

来源：http://www.ido321.com/997.html

一、图像处理(非特别说明，所有结果均来自最新版Google)

在HTML 5中，不仅可以使用Canvas API绘制图形，也可以用于处理网络或磁盘中的图像文件，然后绘制在画布中。绘制图像时，需要使用drawImage()方法：

drawImage(image,x,y):image是图像引用，x,y是绘制图像时在画布中的起始位置

drawImage(image,x,y,w,h):前三个同上，w，h是绘制时图像的宽度和高度，可以用于缩放图像

drawImage(image,sx,sy,sw,sh,dx,dy,dw.dh): 将画布中已经绘制好的图像的全部或者局部复制到画布的另一个位置。sx,sy,sw,sh分别是原图中被复制区域的起始位置宽高，dx,dy,dw,dh 表示复制后图像在画布中的起始位置和高宽。

[code]

// onload事件实现边绘制边加载

[/code]

效果：

1、图像平铺

[code]

[/code]

效果：



在HTML 5中，利用context.createPattern(image,type)也可以实现平铺，type取值同background-image的平铺值一样。

[code]

[/code]

能同样实现平铺（图片没有缩放，所以是原图大小平铺）

2、图像裁剪

[code]

[/code]

效果：

3、像素处理

[code]

[/code]

getImageData(sx,sy,sw,sh):表示获取像素区域的起始坐标和 高宽，返回一个具有width,height,data等属性CanvasPixelArray对象，其中data属性存放像素数据的数组，形如 [r1,g1,b1,a1,r2,g2,b2,a2……],r1,g1,b1,a1分别是第一个像素的红绿蓝值及透明度，以此类推。

putImageData(imagedata,dx,dy[,dirtyx,dirtyy,dirtyWidth,dirtyHeight]): 将像素数据重新绘制到图像上。imagedata是像素数组，dx,dy表示重绘的起始位置，后面四个参数是给出一个矩形的左上角坐标和高宽。

Canvas API的像素操作只有部分浏览器支持，截图效果来自新版的火狐浏览器

二、绘制文字

[code]

[/code]

fillText(string,x,y[,maxwidth])：前三个不解释，maxwidth表示显示文字的最大宽度，可防止文字溢出

strokeText(string,x,y[,maxwidth]：同上。

文字属性设置

font:设置字体

textAlign:水平对齐方式，取值可是start/end/left/right/center.默认是start

textBaseline:垂直对齐方式，取值可是top/hanging/middle/alphabetic/ideographic/bottom.默认是alphabetic

最终效果

下一篇：9个JQuery和5个JavaScript经典面试题