canvas图形移动，缩放，旋转 - Kaiqisan

图形移动，缩放，旋转

这里的操作和css里面的这些操作有一些不同之处

关键代码

translate(x，y): 这个操作试图移动画布的坐标轴，它和css的transform:translate(x, y)的移动方向是一样的，都是以右为横向移动正方向，以下为纵向移动正方向。

下图可以更好地理解这个坐标轴的意思

上图将指令应为

ctx.translate(x1, y1)

将坐标轴向左移动x1，向下移动y1

移动坐标轴轴可以在某些绘制中能够减少许多不必要的计算。

rotate(angle): 旋转坐标轴，以坐标轴的原点为轴旋转，正数为顺时针，负数为逆时针，使用弧度制，可以和上面的translate平移坐标轴一起配合使用,再加上for循环可以有奇效，具体要画什么，就要发挥大伙们的想象力了。

上图中②到③顺时针旋转了大约三十度。

scale(x, y): 试图在横纵两个方向拉伸画布(以坐标原点为基础)，横向拉伸x倍，纵向拉伸y倍。它就是缩放功能，但是能够做到横纵不同比例的缩放。

在左图中，没有进行缩放，实际画布区域和绘制画布区域是一样的，放大之后，绘制画布区域放大两倍，实际画布区域不变，变大之后绘制的图片虽然可能还在绘制画布区域，但是可能因为超出实际画布区域而已经无法显示。上图为横纵都放大两倍之后的结果。

保存状态

接上：

由于该设置是全局生效的，会影响到后面的绘图，如果只是想一时地改变整个画布的状态的话可以使用下面的指令

ctx.save()
............. // 一些代码
ctx.restore()

第一行可以保存你当前画布的所有的状态并把此次状态入栈，第二行指令就是出栈，弹出上一个状态，如果出栈后栈空了，当前状态就是画布默认的状态。有了这个方法，就可以不用再手动恢复状态了。

/* 这样很麻烦 */
ctx.scale(2, 0.5)
............. // 一些代码
ctx.scale(0.5, 2)

总结

今天的操作实际上是对整块画布进行操作，从而实现整体上的改变，。这次引入了两个概念，一个是显示画布，一个是实际画布（我自己定义的概念），实际画布在一开始和显示画布是重合的，在各种画布变换中，产生变动的是实际画布，它的变动影响接下来的图像绘制，如果没有掌握好一个度的话或许有些内容在实际画布里，但它并不显示在显示画布(除非你一开始就想要这样)，这样的变换可以在绘制某些特殊图形的时候会更加方便，或许可以减少代码量和运算量。但使用完成之后不想使画布转换之后记得回退。ctx.restore().