本节书摘来自华章计算机《HTML5 Canvas游戏开发实战》一书中的第2章，第2.4节,作者：张路斌著， 更多章节内容可以访问云栖社区“华章计算机”公众号查看。
无论我们开发的是应用程序还是游戏软件，都是离不开图片，没有图片就无法让整个页面漂亮起来。开发游戏的时候，游戏中的地图、背景、人物、物品等都是由图片组成的，所以图片的显示和操作非常重要。Canvas中提供了drawImage函数和putImageData函数来绘制图片，在本节中将一一讲解。2.4.1 利用drawImage绘制图片drawImage函数有3种函数原型，其语法如下：
drawImage(image, dx, dy); drawImage(image, dx, dy, dw, dh); drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);第一个参数image是要绘制的对象，这个参数可以是HTMLImageElement、HTML-CanvasElement或者HTMLVideoElement，dx、dy是image在Canvas中定位的坐标值，dw、dh表示image在Canvas中即将绘制区域（相对dx和dy坐标的偏移量）的宽度和高度值，sx、sy是image所要绘制的起始位置，sw、sh表示image所要绘制区域（相对image的sx和sy坐标的偏移量）的宽度和高度值。关于第一个参数，我们先使用HTML的标签来得到将要绘制的图片的数据。首先准备一张图片face.jpg，然后看代码清单2-23。代码清单 2-23
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> </head> <body> img标签<br /> <img id="face" src="face.jpg" alt="The Face" width="240" height="240" /><br /> canvas画板<br /> <canvas id="myCanvas" width="500" height="350"> 你的浏览器不支持HTML5 </canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var img=document.getElementById("face"); ctx.drawImage(img,10,10); </script> </body> </html>代码解析首先在html中加入标签。
<img id="face" src="face.jpg" alt="The Face" width="240" height="240" /><br />然后在Canvas中通过< img>标签的id取得图片数据。
var img=document.getElementById("face");最后用drawImage函数将图片绘制到画板上。
ctx.drawImage(img,10,10);运行效果如图2-26所示。上面的代码是通过标签来获取的，我们也可以通过JavaScript的Image对象来获取。具体使用方法如代码清单2-24所示。代码清单 2-24
<script type="text/javascript"> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var img=document.getElementById("face"); img.onload = function(){ ctx.drawImage(img,10,10); }; </script>代码解析首先建立Image对象。
var image = new Image();然后通过设置src属性，来载入图片。
image.src = "face.jpg";接着添加onload事件侦听，当图片载入完成时将其绘制到画板上。
image.onload = function(){ ctx.drawImage(image,10,10); };运行效果如图2-27所示。
下面具体看一下drawImage函数的3种函数原型的用法与区别，如代码清单2-25所示。代码清单 2-25
<script type="text/javascript"> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var image = new Image(); image.src = "face.jpg"; image.onload = function(){ ctx.drawImage(image,10,10); ctx.drawImage(image,260,10,100,100); ctx.drawImage(image,50,50,100,100,260,130,100,100); }; </script>代码解析下面的代码表示从坐标(10,10)开始绘制整张图片。
ctx.drawImage(image,10,10);下面的代码表示从坐标(260,10)开始绘制整张图片到长100、宽100的矩形区域内。
ctx.drawImage(image,260,10,100,100);下面的代码表示截取图片从 (50,50)到(100,100)的部分，从坐标(260,130)开始绘制，放到长100、宽100的矩形区域内。
ctx.drawImage(image,50,50,100,100,260,130,100,100);运行效果如图2-28所示。
2.4.2 利用getImageData和putImageData绘制图片将图片绘制到Canvas画板上还有另一种方法，就是使用putImageData(imgdata,dx,dy,sx,sy,sw,sh)函数。putImageData函数有7个参数，其中imgdata为像素数据，dx、dy是绘制图片的定位坐标值， sx、sy是imgdata所要绘制图片的起始位置，sw、sh是imgdata所要绘制区域（相对imgdata的sx和sy坐标的偏移量）的宽度和高度值。值得一提的是，这里面第4个参数以及其后的所有参数都可以省略，如果这些参数都省略了，则表示绘制整个imgdata。在使用putImageData函数前，需要先用getImageData(x,y,w,h)函数得到像素数据，这里指的是从Canvas画板上取得所选区域的像素数据，它的4个参数分别是选择区域起点的坐标x和坐标y，选择区域的长和宽。putImageData(imgdata,dx,dy,x,y,w,h)函数则表示将所得到的像素数据描画到Canvas画板上形成图形。下面是putImageData函数的使用过程，如代码清单2-26所示。代码清单 2-26
<script type="text/javascript"> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var image = new Image(); image.src = "face.jpg"; image.onload = function(){ ctx.drawImage(image,10,10); var imgData=ctx.getImageData(50,50,200,200); ctx.putImageData(imgData,10,260); ctx.putImageData(imgData,200,260,50,50,100,100); }; </script>代码解析图片数据读取完成后，首先将图片数据绘制到Canvas画板上。
ctx.drawImage(image,10,10);然后用getImageData函数从画板上取得像素数据。
var imgData=ctx.getImageData(50,50,200,200);将所取得的整个像素数据画到Canvas画板上。
ctx.putImageData(imgData,10,260);将所取得的像素数据的一部分画到Canvas画板上。
ctx.putImageData(imgData,200,260,50,50,100,100);运行效果如图2-29所示。
注意 代码清单2-26中使用了getImageData函数获取图片数据,此函数在Google Chrome等浏览器中会涉及跨域问题，所以无法直接在浏览器中浏览，必须通过服务器来访问。我们在第1章配置环境的时候已经安装了本地服务器，参照1.5节的内容，将本地的代码文件放到本地服务器上，就可以看到测试结果了。以后凡是用到getImageData函数的地方，一定要使用此方法进行测试，此处不赘述。2.4.3 利用createImageData新建像素createImageData函数有两种函数原型，其语法分别如下所示：createImageData(sw, sh); 其一，返回指定大小的imageData对象。createImageData(imagedata); 其二，返回与指定对象相同大小的imageData对象。首先需要知道的是，通过createImageData返回的是一个空的imageData对象，必须要针对其像素进行赋值才能显示到Canvas画板上。下面我们通过例子来看看这两种原型的使用方法与区别，如代码清单2-27所示。代码清单 2-27
<script type="text/javascript"> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var image = new Image(); image.src = "face.jpg"; image.onload = function(){ ctx.drawImage(image,10,10); var imgData=ctx.getImageData(50,50,200,200); var imgData01=ctx.createImageData(imgData); for (i=0; i<imgData01.width*imgData01.height*4;i+=4){ imgData01.data[i+0]=255; imgData01.data[i+1]=0; imgData01.data[i+2]=0; imgData01.data[i+3]=255; } ctx.putImageData(imgData01,10,260); var imgData02=ctx.createImageData(100,100); for (i=0; i<imgData02.width*imgData02.height*4;i+=4){ imgData02.data[i+0]=255; imgData02.data[i+1]=0; imgData02.data[i+2]=0; imgData02.data[i+3]=155; } ctx.putImageData(imgData02,220,260); }; </script>代码解析图片数据读取完成后，首先将图片数据绘制到Canvas画板上。
ctx.drawImage(image,10,10);然后用getImageData函数从画板上取得像素数据。
var imgData=ctx.getImageData(50,50,200,200);使用createImageData返回与imgData相同大小的ImageData对象。
var imgData01=ctx.createImageData(imgData);下面imgData01进行赋值。
for (i=0; i<imgData01.width*imgData01.height*4;i+=4){ imgData01.data[i+0]=255; imgData01.data[i+1]=0; imgData01.data[i+2]=0; imgData01.data[i+3]=255; }利用putImageData将imgData01画到Canvas画板上。
ctx.putImageData(imgData01,10,260);使用createImageData返回一个大小为100×100的ImageData对象。
var imgData02=ctx.createImageData(100,100);对imgData02进行赋值。
for (i=0; i<imgData02.width*imgData02.height*4;i+=4){ imgData02.data[i+0]=255; imgData02.data[i+1]=0; imgData02.data[i+2]=0; imgData02.data[i+3]=155; }利用putImageData将imgData02画到Canvas画板上。
ctx.putImageData(imgData02,220,260);运行效果如图2-30所示。
相关资源：移动互联网之路：HTML5 CSS3 jQuery Mobile APP与移动网站设计从入门到精通.李晓斌(带详细书签).pdf