Canvas是一个功能相当强大的画布，任由你去书写，当然，他也支持了图像处理的功能。
drawImage（image，Dx，Dy）；//用于显示，有时会超出
drawImage（image，Dx，Dy，Dw，Dh）；//用于缩放
drawImage（image，Sx，Sy，Sw，Sh，Dx，Dy，Dw，Sh）；//用于剪裁、缩放、显示
注：image是一个图像对象； Dx是画布中的x坐标，Dy是画布中的y坐标，Dw是图像在画布中的宽度，Dy是图像在画布中的高度，Sx，Sy，Sw，Sh分别是原图像中的x、y、width、height（本人较懒，略写一下）。
下面是一个给出的剪裁的方法源代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Canvas</title> </head> <style type="text/css"> body{margin:20px auto; padding:0; width:800px; } canvas{border:dashed 2px #CCC} </style> <script type="text/javascript"> function $$(id){ return document.getElementById(id); } function pageLoad(){ var can = $$('can'); var cans = can.getContext('2d'); var objImg = new Image(); objImg.src = 'lin.jpg'; objImg.onload = function (){ cans.drawImage(objImg,500,400,500,400,100,100,500,400); } } </script> <body onload="pageLoad();"> <canvas id="can" width="800px" height="600px" onclick="img_click(this);"></canvas> </body> </html>
原图像——一个美女，哈哈哈
显示后：
如有问题，可参考：http://www.aqee.net/html-5-canvas-tutorial-displaying-images/