如何将未提前保存状态的已修改HTML5 Canvas上下文重置为默认值

我们都熟悉Canvas的标准状态管理逻辑：

• 从零新建Canvas实例时，只要在执行任何状态修改前调用context.save()记录初始快照，后续不管改了多少绘制参数、变换矩阵，最后调用context.restore()就能直接回溯到干净的初始状态。
• 但实际开发经常碰到棘手情况：拿到的Canvas已经被外部代码改过一堆参数，连在改动前插入context.save()的时机都找不到，根本没法靠save/restore的快照机制回退状态。

实用重置方案 #

方案一：零成本彻底硬重置 #

这是兼容性最好、最不容易出错的重置方式：只要重新给canvas元素的width、heightDOM属性赋一次值（哪怕值和当前值完全一致），浏览器就会把整个2D上下文的所有状态全部清空，回到刚初始化时的默认值。
操作时要注意：

• 这个操作会连带清空画布上已经绘制的所有像素内容，不是只重置状态，是连已画的内容一起清除。
• 必须操作DOM的原生宽高属性，不要用CSS样式改宽高：比如直接写canvas.width = canvas.width，改style属性的宽高不会触发上下文重置逻辑。

示例代码：

// 获取已被修改过的canvas元素和对应2D上下文
const targetCanvas = document.querySelector('#已被改动的canvas节点');
const ctx = targetCanvas.getContext('2d');

// 触发硬重置，所有上下文状态立刻回到默认值
targetCanvas.width = targetCanvas.width;
targetCanvas.height = targetCanvas.height;

方案二：保留已有像素的手动重置 #

如果重置时不想擦掉画布上已经画好的内容，就需要手动把所有可修改的上下文属性，挨个对齐W3C规范定义的默认值，同时把变换矩阵重置为单位矩阵。
核心需要复位的属性列表：

// 逐一刻回规范定义的默认值
ctx.globalAlpha = 1;
ctx.globalCompositeOperation = 'source-over';
ctx.fillStyle = '#000';
ctx.strokeStyle = '#000';
ctx.lineWidth = 1;
ctx.lineCap = 'butt';
ctx.lineJoin = 'miter';
ctx.miterLimit = 10;
ctx.font = '10px sans-serif';
ctx.textAlign = 'start';
ctx.textBaseline = 'alphabetic';
ctx.shadowBlur = 0;
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
ctx.shadowColor = 'rgba(0,0,0,0)';
// 把平移、缩放、旋转等所有自定义变换清零
ctx.setTransform(1, 0, 0, 1, 0, 0);

这个方法的局限性：

• 因为浏览器会不断为Canvas上下文新增可修改的特性属性，手动列属性的方式很可能漏项，碰到新特性时可能出现重置不彻底的问题。
• 优势是完全不影响画布上已有的像素内容，适合需要保留原有绘制结果、只调整后续绘制状态的场景。

内容的提问来源于stack exchange，提问作者L777