HTML5之Canvas绘图——图像处理教程

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/