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 >
<canvas id="can" width="800px" height="600px" onclick="img_click(this);"></canvas>
</body>
</html>
原图像——一个美女，哈哈哈
显示后：
如有问题，可参考：http://www.aqee.net/html-5-canvas-tutorial-displaying-images/
时间： 2024-10-11 18:31:26