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以上版本,其它浏览器均能兼容。