canvas笔记六---变形

1、状态的保存和恢复 Saving and restoring state

save()
保存画布(canvas)的所有状态，状态指的是当前画面应用的所有样式和变形的一个快照
restore()
save 和 restore 方法是用来保存和恢复 canvas 状态的，都没有参数

每次调用save相当于保存当前状态并压入栈中，调用restore，状态栈中顶层的状态回弹出，并恢复所有状态

save和restore的使用示例

var ctx = document.getElementById(‘canvas’).getContext(‘2d’);

ctx.fillRect(0,0,150,150); // 使用默认设置绘制一个矩形
ctx.save(); // 保存默认状态

ctx.fillStyle = ‘#09F’ // 在原有配置基础上对颜色做改变
ctx.fillRect(15,15,120,120); // 使用新的设置绘制一个矩形

ctx.save(); // 保存当前状态
ctx.fillStyle = ‘#FFF’ // 再次改变颜色配置
ctx.globalAlpha = 0.5;
ctx.fillRect(30,30,90,90); // 使用新的配置绘制一个矩形

ctx.restore(); // 重新加载之前的颜色状态
ctx.fillRect(45,45,60,60); // 使用上一次的配置绘制一个矩形

ctx.restore(); // 加载默认颜色配置
ctx.fillRect(60,60,30,30); // 使用加载的配置绘制一个矩形

2、移动Translating

translate(x, y) 它用来移动 canvas 和它的原点到一个不同的位置
translate 方法接受两个参数。x 是左右偏移量，y 是上下偏移量，如下图所示。

var ctx = document.getElementById(‘canvas’).getContext(‘2d’);
for (var i = 0; i < 3; i++) {
for (var j = 0; j < 3; j++) {
ctx.save();
ctx.fillStyle = ‘rgb(’ + (51 * i) + ', ’ + (255 - 51 * i) + ‘, 255)’;
ctx.translate(10 + j * 50, 10 + i * 50);
ctx.fillRect(0, 0, 25, 25);
ctx.restore();
}
}

3、rotate旋转

rotate(angle)
这个方法只接受一个参数：旋转的角度(angle)，它是顺时针方向的，以弧度为单位的值。

ctx.fillStyle = "blue"
ctx.fillRect(100,100,25,25)
ctx.rotate(Math.PI*2/12)

ctx.fillStyle = "red"
ctx.fillRect(100,100,25,25)

4、缩放Scaling

scale(x, y)
scale 方法可以缩放画布的水平和垂直的单位。两个参数都是实数，可以为负数，x 为水平缩放因子，y 为垂直缩放因子，如果比1小，会缩小图形， 如果比1大会放大图形。默认值为1， 为实际大小。

ctx.scale(10, 3);
ctx.fillRect(1, 10, 10, 10);