<!--
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(){
var canvas
= document
.querySelector("#test")
var ctx
= canvas
.getContext("2d")
ctx
.translate(50,50)
ctx
.rotate(45*Math
.PI
/180)
ctx
.scale(1.5,1.5)
ctx
.beginPath()
ctx
.fillRect(0,0,100,100)
}
</script
>
</body
>
