<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Html5游戏开发学习1-Canvas</title>
</head>
<body>
<canvas id="canvas" width="600" height="600" style="broder:black 1px solid;">
浏览器不支持HTML5 canvas
</canvas>
<img src="b.jpg" id="img"><!--注意是这里,通过标签加入图片,src是图片路径-->
<script type="text/javascript" charset="utf-8">
//使用drawImage()方法绘制图像
//获取canvas对象的引用
var canvas = document.getElementById('canvas');
//获取canvas的2d绘图环境
var context = canvas.getContext('2d');
//获得图片对象的引用
var image = document.getElementById('img');
//在(0,350)处绘制图片
context.drawImage(image,0,350);
//缩小至原来的一半
context.drawImage(image,0,400,100,25);
//绘制图像的局部
context.drawImage(image,0,0,60,50,0,420,60,50);
</script>
</body>
</html>
效果: