开发的游戏的时候，游戏中的地图、背景、任务、物品等都是由图片组成的，本节我们来谈谈在canvas中如何操作图片吧。
canvas中提供了drawImage函数和putImageData函数来绘制图片。
drawImage()函数有3种函数原型，语法如下：
drawImage(image,dx,dy);
drawImage(image,dx,dy,dw,dh);
drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);
参数一image是要绘制的对象，这个参数可以是HTMLImageELement、HTMLCanvasElement、HTMLVideoElement,
dx,dy是image在canvas中定位的坐标值，
dw,dh表示image在canvas中即将绘制的区域（相对dx和dy坐标的偏移量）的宽度和高度值，
sx,sy是image所要绘制的起始位置，
sw,sh是image所要绘制的区域（相对image的sx和sy坐标的偏移量）的宽度和高度值
先准备好HTML部分：
<body>
img标签<br/>
<img src="../images/travel.jpg" id="travel" alt="travel" title="travel"/><br/>
<br/><br/>
canvas画板<br/>
<!-- PS:画板要设定宽高值，且要不能小于原图，否则图片会显示不完整 -->
<canvas id="mycanvas" width="500" height="500">
你的浏览器不支持HTML5
</canvas>
</body>Javascript部分：
方法一：通过<img>标签来获取
var c=document.getElementById('mycanvas');
var ctx=c.getContext('2d');
//获取图片id,取得图片数据
var img=document.getElementById('travel');
//用drawImage()函数将图片绘制到画板上
ctx.drawImage(img,0,0);方法二：通过javascript的Image对象来获取
先创建一个Image对象，然后通过设置src属性来载入图片，接着添加onload事件侦听，当图片载入完成时将其绘制到画板上。
var c=document.getElementById('mycanvas');
var ctx=c.getContext('2d');
var img=new Image();
img.src='../images/travel.jpg';
img.onload=function(){
ctx.drawImage(img,0,0);
};
var c=document.getElementById('mycanvas');
var ctx=c.getContext('2d');
var image=new Image();
image.src='../images/travel.jpg';
image.onload=function(){
//表示从坐标(0,0)开始绘制整张图片
ctx.drawImage(image,0,0);
//表示从坐标(200,0)开始绘制整张图片到长100，宽100的矩形区域内
ctx.drawImage(image,200,0,100,100);
//表示截取图片从(50,50)到(100,80)的部分，从坐标(200,110)开始绘制放到长100，宽60的矩形区域内
ctx.drawImage(image,50,50,100,80,200,110,100,60);
};
还有一种绘制图片的方法，就是利用getImageData和putImageData绘制图片：
putImageData(imgdata,dx,dy,sx,sy,sw,sh)函数的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(imagedata,dx,dy,x,y,w,h)函数则表示将所得到的像素数据描画到canvas画板上形成图形。
var c=document.getElementById('mycanvas');
var ctx=c.getContext('2d');
var image=new Image();
image.src='../images/travel.jpg';
image.onload=function(){
ctx.drawImage(image,0,0);
var imgData=ctx.getImageData(50,50,192,168);
ctx.putImageData(imgData,200,260);
ctx.putImageData(imgData,200,260,50,50,100,100);
}; 注：使用getImageData函数获取图片数据，此函数在chrome，Firefox，ie等浏览器中会设计跨域问题，所以无法直接在浏览器中浏览，必须通过服务器来访问测试。
Author:致知
Sign:路漫漫其修远兮，吾将上下而求索。
原文地址：http://blog.csdn.net/lzgs_4/article/details/44755043
