「这是我参与11月更文挑战的第7天，活动详情查看：2021最后一次更文挑战」
-
ctx.save()
每当save()方法被调用后，当前的状态就被推送到栈中保存。 -
ctx.restore(x, y)
每一次调用 restore 方法，上一个保存的状态就从栈中弹出 -
translate(x, y)
用来移动canvas的原点到指定的位置 -
ctx.rotate()
旋转坐标轴 -
ctx.scale()
缩放坐标轴
save && restore
save 和 restore 方法就是是用来保存和恢复 canvas 状态的
可以调用任意多次 save方法,类似数组的 push()。
调用 restore 方法，上一个保存的状态就从栈中弹出,类似数组的 pop()。
下面可以看到利用上面两个方法，方便的画出对称的颜色
ctx.fillRect(0, 0, 150, 150); // 使用默认设置绘制一个矩形
ctx.save(); // 保存默认状态
ctx.fillStyle = 'red' // 在原有配置基础上对颜色做改变
ctx.fillRect(15, 15, 120, 120); // 使用新的设置绘制一个矩形
ctx.save(); // 保存当前状态
ctx.fillStyle = '#FFF' // 再次改变颜色配置
ctx.fillRect(30, 30, 90, 90); // 使用新的配置绘制一个矩形
ctx.restore(); // 重新加载之前的颜色状态
ctx.fillRect(45, 45, 60, 60); // 使用上一次的配置绘制一个矩形
ctx.restore(); // 加载默认颜色配置
ctx.fillRect(60, 60, 30, 30); // 使用加载的配置绘制一个矩形
translate
我们每次调用translate，都会改变canvas原点的位置，如果绘制的两个东西完全不相关的话，就不应该按照第一个图案绘制完的点去计算绘制第二个图案。
所以我们很需要一个记录原点和回复恢复原点的方法，其实也不应该说是原点，因为如果是绘制三个或三个以上的图案，记录了多次，恢复也就恢复上一次保存的点。
如果我们没有调用上面的两个方法，就会出现这种情况
ctx.translate(50, 50);
ctx.strokeRect(0, 0, 100, 100)
ctx.translate(100, 100);
ctx.fillRect(0, 0, 100, 100)
如果我们调用了的话，就会回到原点了，根据原点来进行绘制
ctx.save(); //保存坐原点平移之前的状态
ctx.translate(50, 50);
ctx.strokeRect(0, 0, 100, 100)
ctx.restore(); //恢复到最初状态
ctx.translate(100, 100);
ctx.fillRect(0, 0, 100, 100)
rotate
我们还可以将canvas的绘制进行旋转
ctx.translate(100, 100);
ctx.rotate(Math.PI / 180 * 45);
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 100, 100);
scale
当然，我们也可以将canvas的绘制进行缩放, 他有两个参数，第一个：缩放x轴。第二个：缩放y轴
ctx.save();
ctx.translate(100, 100);
ctx.rotate(Math.PI / 180 * 10);
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 100, 100);
ctx.restore();
ctx.save();
ctx.scale(0.5,0.5);
ctx.fillStyle = "black";
ctx.fillRect(0, 0, 100, 100);
画图片
// 参数 1：要绘制的 img
// 参数 2、3：源img被切的坐标 x和y轴
// 参数 4、5：源img坐标那开始的width 和 height
// 参数 6、7：放在canvas的哪里，x和y轴
// 参数 8、9：切出来的img要展示的width 和 height
const img = new Image();
img.onload = function(){
ctx.drawImage(img, 0, 0, img.width, img.height, 20, 20, 200, 200)
}
img.src = './img.jpeg';
我觉得菜鸟教程这个图就很清晰了
