方法与参数介绍
| 函数 | 参数 | 描述 |
|---|---|---|
| translate | dx,dx | 将坐标系在X轴和Y轴移动的距离 |
| rotate | angle | 坐标系旋转的角度，顺时针为正,，逆时针为负 |
| save | 保存当前坐标系的状态 | |
| restore | 恢复上一次坐标系状态 | |
| beginpath | 重新开始路径，或者说是重置路径。 |
translate方法
可以理解为移动（0，0）
rotate方法
-
旋转的中心是在整个画布的左上角（0,0），旋转的正方向是顺时针，旋转的反方向是逆时针。
-
重点：canvas中的rotate方法是绕画布左上角（0,0）进行旋转的，而且会受到translate的影响
-
rotate的旋转是以原点为基准进行旋转。
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rotate(20*Math.PI/180);
ctx.fillRect(50,20,100,50);
save方法和restore方法
- save：用来保存Canvas的状态。save之后，可以调用Canvas的平移、放缩、旋转、错切、裁剪等操作。
- restore：用来恢复Canvas之前保存的状态。防止save后对Canvas执行的操作对后续的绘制有影响。
- 这两个方法对绘画转盘形有很大的帮助。
对canvas中特定元素的旋转平移等操作实际上是对整个画布进行了操作，所以如果不对canvas进行save以及restore，那么每一次绘图都会在上一次的基础上进行操作，最后导致错位。比如说你相对于起始点每次30度递增旋转，30，60，90.如果不使用save 以及 restore 就会变成30, 90, 150，每一次在前一次基础上进行了旋转。save是入栈，restore是出栈。
<body>
<!--创建一个边长为200的正方形画布-->
<canvas id="mc" width="200" height="200" style="border:1px solid black"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('mc'); //获取Canvas元素对应的DOM对象
var ctx = canvas.getContext('2d');//获取Canvas上的绘图的CanvasRenderingContext2D对象
ctx.lineWidth=3; //设置笔触线条的宽度
ctx.translate(100,100); //将原点左边设置到画布的中间
ctx.save(); //保存当前画布的状态，该状态包含了lineWidth=3,translate(100,100),然后其他那些属性为默认值.
ctx.strokeStyle='red'; //设置线条颜色为红色
//坐标系统旋转90°
ctx.rotate(Math.PI/2);
//画第一条直线
ctx.beginPath();
ctx.moveTo(-100,0);
ctx.lineTo(100,0);
ctx.closePath();
ctx.stroke();
//恢复之前保存的绘图状态
ctx.restore();
//再画第二条直线
ctx.beginPath();
ctx.moveTo(-100,0);
ctx.lineTo(100,0);
ctx.closePath();
ctx.stroke();
</script>
</body>
分析：
看代码可知，画两条线的代码是一样的，可是画出来的一条是垂直的红线，一条是水平的黑线。调用save()方法时，保存的状态是
lineWidth=3,translate(100,100),然后其他那些属性为默认值，如默认的lineStyle为黑色。
画第一条线时，是将坐标系统旋转了90°，设置了lineStyle=“red”，故画出来的是垂直的红色线；画第二条线前调用了restore()方法，即恢复为了之前保存的绘图状态，该绘图状态是坐标系统没有经过旋转的，线条颜色也默认为黑色，所以画出来的先就是我们想要得到的水平的黑色线。
1234
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
