发布时间：2011年12月25日 16时46分19秒
属性：程序Web开发 > Javascript/Html
访问次数：76692
Html5的Canvas中使用Image
Html5的Canvas使用Image通过drawImage建立图像，drawImage()方法里面最多可以带参数9个，使用方法"drawImage(image, image_x,image_ y,image_ w,image_ h, x, y, w, h)"为完整的Image使用方法，drawImage中参数image为实例化的Image，例如 var myImage=new = new Image();，然后再将Image的图片路径指定怎是myImage.src = "img/DSCF9801.png";，后面的8个参数可以将其分了两组，前面4个参数为加入图片本身的坐标宽高尺寸(即image_x,image_ y,image_ w,image_ h)，后面4个参数为Image对象在Canvas中的显示坐标和宽高尺寸(即 x, y, w, h)。在使用过程中可以drawImage(image, x, y)、drawImage(image, x, y, w, h)、drawImage(image, image_x,image_ y,image_ w,image_ h, x, y, w, h)方式来完成，下面详细介绍（也可以先从文章底部阅读，第二部分是本文最终效果）。
建立基本的图片drawImage(image, x, y)和drawImage(image, x, y, w, h)
先新建一个Html页面，在<body>中放入<canvas>标签，给canvas标签加入id属性，设置宽高或设定样式。然后用javascript在canvas中加入image。在分别使用drawImage(image, x, y)，drawImage(image, x, y, w, h)。下面是详细代码和效果展示。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">...
var myImage = new Image();//定义图片
myImage.src = "img/DSCF9801.png";//指定图片
function load() ...{
//copyright (C) www.weisim3.com 12.25.2011
//Html5的Canvas中使用Image
//获取canvas的Id
var drawingCanvas = document.getElementById('myCanvas');
//getContext为固定的2d
var context = drawingCanvas.getContext('2d');
//让图片在canvas中加载显示
myImage.onload = function () ...{
//drawImage(Image,坐标x、y轴边距为0)
context.drawImage(myImage, 0, 0);
}
}
</script>
</head>
<body onload="load()">
<div style=" padding-top:3px">
<canvas id="myCanvas" width="500" height="300"
style="border:1px solid #c3c3c3; background-color:#333333">
浏览器无法支持Canvas/Your browser does not support the canvas element.
</canvas>
</div>
</body>
</html>
下面是context.drawImage(myImage, 0,0)和context.drawImage(myImage, 15, 15, 360, 240)效果
将所有参数传入建立drawImage(image, image_x,image_ y,image_ w,image_ h, x, y, w, h)
这里将所有参数都传入drawImage方法中，这里还需要说明的是image_x,image_ y,image_ w,image_ h四个参数为图片本身的参数，就是说加入进来的图片实际大小，如果某张图片宽高为100:100像素的比例，那么如果在这里image_ w,image_ h如果传入值都为150像素，那么就会将图片拉伸为150像素，同样如果是小于100像素那么就会收缩显示，后面的x, y, w, h四个参数为Image在canvas中显示位置大小尺寸。在这里的示例采用动态传入值，示例中加入了8个Input text用来输入参数，然后用一个button的onclick事件将这个8个Input text值传入drawImage方法中，头一个image参数按照开始原样不做改动。下面是详细代码和效果。
<script type="text/javascript">...
function Button1_onclick() ...{
//copyright (C) www.weisim3.com 12.25.2011
//Html5的Canvas中使用Image
//图片本身的坐标和宽高
var objX = document.getElementById("Text1").value;
var objY = document.getElementById("Text2").value;
var objW = document.getElementById("Text3").value;
var objH = document.getElementById("Text4").value;
//Image在Canvas中的位置坐标和宽高显示
var pX = document.getElementById("Text5").value;
var pY = document.getElementById("Text6").value;
var w = document.getElementById("Text7").value;
var h = document.getElementById("Text8").value;
var drawingCanvas = document.getElementById('myCanvas');
var context = drawingCanvas.getContext('2d');
//clearRect清理Canvas
context.clearRect(0, 0, drawingCanvas.width, drawingCanvas.height);
var myImage = new Image();
myImage.src = "img/DSCF9801.png";
myImage.onload = function () ...{
//动态传入drawImage值
context.drawImage(myImage, objX, objY, objW, objH, pX, pY, w, h);
}
}
</script>
<body onload="Button1_onclick()">
<div>
<table width="500" border="0" cellspacing="0" cellpadding="0">
<tr style="text-align: right">
<!--图片本身的坐标和宽高-->
<td>x:<input class="Text" id="Text1" type="text" value="10" /></td>
<td>y:<input class="Text" id="Text2" type="text" value="10"/></td>
<td> width: <input class="Text" id="Text3" type="text" value="100"/></td>
<td >height:<input class="Text" id="Text4" type="text" value="100"/></td>
<td rowspan="2" >
<input id="Button1" type="button" value="INPUT" onclick="Button1_onclick()"/>
</td>
</tr>
<tr style="text-align: right">
<!--Image在Canvas中的位置坐标和宽高显示-->
<td>X:<input class="Text" id="Text5" type="text" value="10" /></td>
<td>Y:<input class="Text" id="Text6" type="text" value="10"/></td>
<td>Width:<input class="Text" id="Text7" type="text" value="100"/></td>
<td>Height:<input class="Text" id="Text8" type="text" value="100"/></td>
</tr>
</table>
</div>
<div style=" padding-top:3px">
<canvas id="myCanvas" width="500" height="300"
style="border:1px solid #c3c3c3; background-color:#333333">
浏览器无法支持Canvas/Your browser does not support the canvas element.
</canvas>
</div>
</body>
已知预知文件可能出现异常，由于Html5标准目前还在更新中，在浏览器预览本文示例可能出现图片加载延时无法显示，只需要刷新页面即可正常显示，IE9以上版本，其它浏览器均能兼容。
文章版权归属weisim3.com所有,未经书面版权许可同意，不得私自转载(或做修改转载)，源文件示例仅供学习使用，更不要出于商业用途或印刷出版发行！否则将追究其相关法律责任，版权联系QQ：729260499。
