在canvas中save()和restore()方法的区别

var c=document.getElementById("canvas");
var ctx=c.getContext("2d");


ctx.fillStyle="red";
ctx.fillRect(0,0,75,50);
// '---------------------以基点( 0, 0 )绘制一个红色矩形'

ctx.save()
//'----------------------移动前先保存之前的操作'

ctx.translate(50, 50);  //基点从(0, 0) 手动改成( 50, 50)
ctx.rotate(Math.PI/3);//摆正五角星 
ctx.fillStyle="yellow";
ctx.fillRect(0,0,85,60);
// '---------------------这里我们不使用restore时，下面我继续绘制一个黄色的矩形'

ctx.fillStyle="blue";
ctx.fillRect(0,0,75,50);
// '---------------------上面这个蓝色的矩形就是以(50, 50)为基点,填充色是上面的绘制的'
ctx.restore()  


ctx.fillStyle="green";
ctx.fillRect(0,0,55,90);

//'这里我们不使用restore时，下面我继续绘制一个矩形'
// '---------------------使用restore()重置所有属性，下面的操作就能恢复到(0, 0)为基点'

⚠️: 在canvas中有很多的属性在你绘制完一个图块的时候，再去绘制另一个图块的时候，上一次某些使用过的属性就会影响你此次绘图的操作，这时你直接restore就相当恢复了默认了设置了