写在前面
canvas在绘图方面的能力正在日益增强，它支持简单的动画效果，并且被很多人所看好，从前一段时间“html5代替flash”的炒作中可见一斑，甚至一些大公司也开始使用canvas代替了原本使用flash实现的功能，当然这不是为了赶潮流，而是canvas确实有一些优势，这个以后再探讨。本文要介绍的是canvas在绘图以外的一点内容，因为光有绘图能力是不够的，下面我们就进入canvas图像处理相关的API学习。
drawImage函数
要将指定图像绘制到canvas上，你需要用到drawImage函数，该函数有三种函数原型：
drawImage(image, dx, dy)
drawImage(image, dx, dy, dw, dh)
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
第一个参数image可以用HTMLImageElement，HTMLCanvasElement或者HTMLVideoElement作为参数。dx和dy是image在canvas中定位的坐标值；dw和dh是image在canvas中即将绘制区域（相对dx和dy坐标的偏移量）的宽度和高度值；sx和sy是image所要绘制的起始位置，sw和sh是image所要绘制区域（相对image的sx和sy坐标的偏移量）的宽度和高度值。
drawImage参数图解
如果上面对参数的描述和参数示意图都无法让你清楚的知道它们的含义，那么看完下面的demo，或许会让你清晰很多。
XHTML
| <!DOCTYPE html><html><head><meta charset= »utf-8″ /><title>Canvas javascript api demo</title><style type= »text/css »>canvas { border:1px #000 solid;}</style></head><body><h1>this is a canvas api test page!</h1><canvas id= »canvas » width= »300″ height= »300″>this browser does not support canvas…</canvas><a href= »http://i.wanz.im/2010/04/22/canvas_javascript_api_learning_four/ »>返回文章</a><script type= »text/javascript »>var $=function(id){ return document.getElementById(id);}window.onload=function(){ var ctx=$(‘canvas’).getContext(‘2d’); var img=new Image(); img.src=’firefox.jpg’; img.onload=function(){ ctx.drawImage(img,-150,50); ctx.drawImage(img,125,50,150,50); ctx.drawImage(img,50,50,150,150,125,150,150,150); }}</script></body></html> |
从这个demo我们还可以看出，当image指定区域与canvas上的绘制区域大小非等比例缩放的时候，图像会被拉伸来适应设置的大小。这里就实现的图像处理中的缩放或者拉伸，裁切部分。
那么image怎么来的？上面的demo中，我创建了DHTML中的Image对象来加载一个图像，你还可以使用document.images，document.getElementsByTagName或者document.getElementById来得到image所接受的对象；甚至你可以通过document.getElementsByTagName或者document.getElementById获取canvas中绘制的图像对象作为image参数的值，但你得保证canvas中绘制了图像。
另一种比较少用到的方法是dataURI，少用是因为就算是支持dataURI的浏览器之间，对它的支持情况也不尽相同，比如支持的格式，大小的区别。因此要用这个，你必须对他们之间的差异很熟悉，才能保证使用后不会出现兼容性问题。还有一些问题就是维护起来比较麻烦，无法缓存，一般图片的数据会很大，增加页面体积。优势在于它是内嵌在文件中的，所以可以减少http请求，可以内嵌到html，css或JavaScript中，可移植性强（主要是不用为路径问题烦恼）。使用方法也很简单，如下：
JavaScript
| 12 | //直接将src属性赋值为图像的dataURI即可img.src=’data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==’; |
附上dataURI转换工具：datauri-0.2.1.jar，使用说明。
补充说明：如果传递给image参数的图像是一个动画图像，那么绘制出来的是动画的poster frame或者第一帧（poster frame不存在时）；如果image参数的值是一个HTMLVideoElement对象，那么canvas上绘制出来的是该对象当前播放位置对应的帧。
写在后面
这次的内容较少，只涉及到图像的变形跟裁切，下一篇文章会讲到图像数据的处理，像素级的，比较高级些，所以留点篇幅哈。最后还是用所学的知识再献上一个demo。