之前的文章已经介绍了如何使用canvas来画正方形，这次介绍如何使用canvas来画一张图片。
1.新建项目
本次使用的工具Aptana Studio 3,打开软件之后，选择File->New->Web Project,选择Default Project,再点击Next，输入你的项目名称，点击Finish，就完成了项目的创建。
2.创建图片文件夹image
在你新建好的项目下，右键点击选择New->Folder->输入文件夹名称image->点击Finish，完成文件夹创建
3.导入图片
把图片复制到image文件夹里面,
飞机图片命名为plane.png
背景图片命名为background.png
4.新建网页文件index.html
在项目下，右键点击选择New->File->输入文件名称index.html->点击Finish，完成网页文件的创建
5.编辑网页文件
<!doctype html>
<html>
<body>
<canvas id="canvas" style="border:2px solid red;" width="480" height="650">
不支持画板对象
</canvas>
<script>
//获取画布和画笔
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
//导入两张图片
var plane = new Image();
plane.src = "image/plane.png";
var background = new Image();
background.src = "image/background.png";
//当图片加载完成，就执行这个方法
enemy.onload = function() {
//画背景
ctx.drawImage(background,0,0);
//画飞机图片
ctx.drawImage(plane,300,200);
}
</script>
</body>
</html>6.查看结果
