canvas变换
<!--
canvas变换
translate(x,y) 移动原点到一个不同的位置（累加的）
rotate(angle) （angle参数是弧度，顺时针方向） 旋转的中心点是canvas的原点（translate来改变原点）
scale(x,y) 两个参数，横轴竖轴的缩放因子
-->
<style type="text/css">
#test{
background-color: #008000;
}
</style>
</head>
<body>
<canvas id="test" width="300" height="300"></canvas>
<script type="text/javascript">
window.onload=function(){
/***************arc(100,100,20,0,(/180)*90,false)********/
var canvas = document.querySelector("#test")
var ctx = canvas.getContext("2d")
ctx.translate(50,50)
ctx.rotate(45*Math.PI/180) //按照50，50的点转45度
ctx.scale(1.5,1.5)
ctx.beginPath()
ctx.fillRect(0,0,100,100)
}
</script>
</body>