canvas中图形的位移、旋转、缩放

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
*{
padding:0px;
margin:0px;
}
</style>
<script type="text/javascript">
   onload=function(){
       var c=document.getElementById("mycanvas");
       c.width=500;
       c.height=500;
       var ctx=c.getContext("2d");
       ctx.fillStyle="#ff0000";
       //移动：横、竖位移
       ctx.translate(100,90);
       //旋转
       ctx.rotate(90*Math.PI/180);//围绕(0,0)起始点开始的
       //缩放
       ctx.scale(0.5,3);

       ctx.rect(0,0,350,150);
       ctx.fill();
   }
</script>
</head>
<body>
   <canvas id="mycanvas"></canvas>
</body>
</html>