<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>变换坐标</title>
<script type="text/javascript">
function move(){
var canvas=document.getElementById("canvas1");
var context=canvas.getContext(‘2d‘);
context.fillStyle="#eeeeee";
context.fillRect(200,10,50,50);
context.translate(200,25);//平移
context.fillStyle="rgba(0,255,0,0.5)";
for(var i=0;i<50;i++){
context.translate(25,25);
context.scale(0.95,0.95);//放大缩小
context.rotate(Math.PI/10);//旋转
context.fillRect(0,0,100,50);
}
}
</script>
</head>
<body>
<canvas id="canvas1" aligh="center" width="500" height="500"></canvas>
<input type="button" align="center" onClick="move()" value="点击我变换坐标">
</body>
</html>
html-3(5)
原文地址：http://www.cnblogs.com/wantao/p/7875158.html