理解canvas中的save()和restore()

绘图过程中如果只想对部分图形执行某操作，将该图形的绘制过程使用save()和restore()包裹起来，后续其它元素的绘制将不受影响。

// 绘制红球
ctx.save();
ctx.arc(0, 0, 30, 0, 2 * Math.PI);
ctx.setFillStyle('red');
ctx.translate(60, 60);
ctx.fill();
ctx.restore();
// 绘制黑球
ctx.arc(0, 0, 10, 0, 2 * Math.PI);
ctx.fill();
ctx.draw();

上图首先绘制了红色球，使用了偏移和设置颜色，将绘制过程使用save()和restore()包裹

继续绘制第二个黑球，原点位置依旧是（0，0）