drawimage(image,dx,dy)
drawimage(image,sx,sy,sw,sh,dx,dy,dw,dh)
drawimage(image,dx,dy,dw,dh)
其中的 image 参数可以是 htmlimageelement（img标签的元素）、htmlcanvaselement （canvas标签的元素）和htmlvideoelement（video的元素） 中的任一个对象。
下面以坦克大战的地图来示意怎么使用 ，其中资源图片为右图
先上基本结构，上节有讲过
你的浏览器不支持canvas! var mycanvas = document.getelementbyid(mycanvas); var context = mycanvas.getcontext(2d);
然后创建一个图片
var mapimg =new image();//创建一个图片mapimg.src = http://www.w3cfuns.com/data/attachment/forum/201107/26/194717f9ijaam199j9jvkv.png//坦克地图的图片地址，它的宽为64，高为16。
然后就可以画图了
context.drawimage(mapimg); //在坐标0,0处画图，宽高为图片本身的宽高context.drawimage(mapimg, 100, 100); //在坐标100, 100处画图，宽高为图片本身的宽高context.drawimage(mapimg, 100, 200, 640, 233); //在坐标100, 200处画图，宽 640，高 233context.drawimage(mapimg, 16, 0, 16, 16, 200, 100, 64, 64);//在坐标200,100处画图，宽64，高64，图内容为距原图左边16，上边0的一个大小为16,16的截图
自己可以试验下[html]
你的浏览器不支持canvas!
[/html]
然后可以试着构造坦克地图了，先定义一个画地图小方块的函数
function drawtile(x, y, type)//参数分别为坐标x,y，和地图的类型function drawtile(x, y, type) { context.drawimage(mapimg, type * 16, 0, 16, 16, x, y, 16, 16); //type*16为距原图左边界距离 }
再试着运行下
[html]
你的浏览器不支持canvas!
[/html]
最后就是构造整个坦克地图了，定义地图如下,其中每个数字代表一种地图类型,0代表没有东西
var map =var map = [ [0,0,3,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,3,3,0,0], [0,0,3,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,3,3,0,0], [3,3,3,3,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,3,3], [3,3,3,3,0,0,0,0,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,3,3], [3,3,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,2,2], [3,3,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0], [2,2,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0], [0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0], [0,0,0,0,0,1,1,1,0,0,0,0,0,0,1,1,1,1,1,1,0,0,1,0,0,0], [0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,1,1,1,1,0,0,1,0,0,0], [4,4,0,0,0,1,0,0,2,0,0,0,2,0,0,0,1,1,1,0,0,0,0,0,0,0], [4,4,0,0,0,1,0,0,2,0,0,0,2,0,0,0,1,1,1,0,0,0,0,0,0,0], [0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,4,4,4,4], [0,0,0,0,1,1,0,0,1,1,1,0,0,0,0,1,1,1,1,0,0,0,4,4,4,4], [0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0], [0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0], [0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0], [0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0], [0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0], [0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0], [0,0,1,1,1,1,0,0,1,1,1,1,1,1,1,1,0,0,1,1,1,1,0,0,3,3], [0,0,1,1,1,1,1,1,0,0,1,1,1,1,0,0,1,1,1,1,1,1,0,0,3,3], [3,3,0,0,1,1,1,1,0,0,0,0,0,0,0,0,1,1,1,1,0,0,3,3,3,3], [3,3,0,0,0,0,0,0,0,0,0,1,1,1,1,0,0,0,0,0,0,0,3,3,3,3], [2,2,3,3,0,0,0,0,0,0,0,1,2,2,1,0,0,0,0,0,3,3,3,3,2,2], [2,2,3,3,0,0,0,0,0,0,0,1,2,2,1,0,0,0,0,0,3,3,3,3,2,2], ];