<!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="qie.PNG" id="img">
<script type="text/javascript" charset="utf-8">
//获取canvas对象的引用
var canvas = document.getElementById('canvas');
//获取canvas的2d绘图环境
var context = canvas.getContext('2d');
//获得图片对象的引用
var image = document.getElementById('img');
//平移物体至原点位置
context.translate(300,200);
//以新原点为中心旋转60°
context.rotate(Math.PI / 3);
context.drawImage(image,0,0,87,86);
//通过反向旋转和平移恢复原点状态
context.rotate(-Math.PI /3);
context.translate(100,200);
</script>
</body>
</html>
运行效果：
