Canvas的缩放操作（十二）

缩放就是放大或减小。
 

缩放函数
context.scale(x,y)
参数x，y表示移动的x轴和y轴上的缩放比例，切记是轴变大

先来看代码：

效果图

上面的效果图我们可以看到，因为轴发生放大，所以矩形位置原点从（100，100）变大2倍到了在（200,200），但宽、高均为100的2倍即200；
注意，这里的缩放也是对Canvas所有元素的，以及接下来的所有的操作，那岂不是很麻烦？？！这个时候想起了上次我们提到的Canvas的状态保存功能，什么意思呢？？
往下面看！！！

绘画代码如下：
 

context.save();  //保存初始状态
context.translate(150,150);  //画布平移，原点平移
context.scale(2,2);
context.fillRect(0,0,100,100);  //平移并放大（注意原点放大还是原点位置

效果图

绘画代码如下：

context.save();  //保存初始状态
context.translate(150,150);  //画布平移，原点平移
context.scale(2,2);
context.fillRect(0,0,100,100);

context.restore();//恢复初始状态
context.fillRect(0,0,100,100); //初始状态绘画

效果图