Question

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

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

我确信它与这行代码有关。this.canvas.getContext（＆＃34; 2d＆＃34;）;和画布在上面定义。

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

代码：

         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();
         };

Answer 1

context.save（）保存上下文的当前状态（strokeStyle，lineWidth等），然后您的代码将更改这些值。在代码的末尾，调用context.restore（），它将恢复代码已更改的先前值。

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

Answer 2

你不是。 context.save和context.restore通常用于高效的纹理转换和旋转，因此在许多示例中都会出现。

保存您的位置，角度和各种其他画布状态。然后，您可以移动到要绘制图像的位置/角度。然后，还原可以将您的co-ord网格捕捉回保存点。比数学上空间旋转点容易得多，也是用帆布2d上下文模式旋转图像的唯一方法。

如果你简单地绘制盒子，线条或未旋转的图像，那么就不要打扰。

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

2 个答案: