Javascript 为什么要使用context.save和context.restore（）？

为什么在任何绘制画布线条的Javascript中都需要使用context.save和context.restore（）

         this.context = this.canvas.getContext("2d");

我确信这与这行代码this.canvas.getContext（“2d”）有关；画布是在上面定义的

         this.canvas = document.getElementById(config.canvasId);

代码：

BarChart.prototype.drawGridlines=function（）{
var context=this.context；
context.save（）；
context.strokeStyle=this.gridColor；
context.lineWidth=2；
//绘制y轴网格线
对于（var n=0；n

context.save（）保存上下文的当前状态（strokeStyle、lineWidth等），然后代码将更改这些值。在代码结束时调用context.restore（），它将还原代码更改的以前的值

---

这样，您就不需要手动恢复所有更改的内容，您的代码也不会影响页面上以前修改过这些值的其他代码。

您不需要。context.save和context.restore通常用于有效的纹理平移和旋转，因此在许多示例中都会出现

保存存储您的位置、角度和各种其他画布状态。然后可以移动到要绘制图像的位置/角度。然后，Restore可以将您的订单网格恢复到保存点。比数学上旋转空间中的点容易得多，也是我所知道的使用canvas 2d上下文模式旋转图像的唯一方法

---

如果你只是画方框、线条或未旋转的图像，那就不用麻烦了。

你读过这些方法的文档了吗，可以找到很好的解释（对不起，我今天不想在这里写摘要作为答案；）

         BarChart.prototype.drawGridlines = function(){
            var context = this.context;
            context.save();
            context.strokeStyle = this.gridColor;
            context.lineWidth = 2;

            // draw y axis grid lines
            for (var n = 0; n < this.numGridLines; n++) {
                var y = (n * this.height / this.numGridLines) + this.y;
                context.beginPath();
                context.moveTo(this.x, y);
                context.lineTo(this.x + this.width, y);
                context.stroke();
            }
            context.restore();
         };