Canvas API的strokeStyle是否全局生效？如何隔离其全局影响？

问题原因 #

Canvas 2D 上下文（ctx）本质是一个状态机，所有样式属性（包括 strokeStyle）都是全局状态，一旦设置就会持续生效，直到被重新修改。你的代码里 first() 函数将 strokeStyle 设为红色后，这个状态会被保留，second() 函数没有重新设置描边颜色，所以会沿用之前的红色——这是 Canvas API 的正常设计特性，不是你的操作错误。

隔离全局影响的解决方案 #

针对函数式编程中“独立代码单元”的需求，有三种常用方式处理 Canvas 的状态污染：

1. 显式设置样式

在每个绘制函数中明确指定所需的样式，覆盖全局状态：

const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");

function first() {
  ctx.beginPath();
  ctx.strokeStyle = "red";
  ctx.moveTo(20, 20);
  ctx.lineTo(20, 100);
  ctx.stroke();
};

function second() {
  ctx.beginPath();
  ctx.strokeStyle = "black"; // 显式设置默认黑色
  ctx.moveTo(20, 100);
  ctx.lineTo(70, 100);
  ctx.stroke();
};

first();
second();

2. 使用 save()/restore() 管理状态

通过 save() 保存当前上下文状态，绘制完成后用 restore() 恢复到之前的状态，避免影响后续绘制：

const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");

function first() {
  ctx.save(); // 保存初始状态（默认样式）
  ctx.beginPath();
  ctx.strokeStyle = "red";
  ctx.moveTo(20, 20);
  ctx.lineTo(20, 100);
  ctx.stroke();
  ctx.restore(); // 恢复到初始状态
};

function second() {
  ctx.beginPath();
  ctx.moveTo(20, 100);
  ctx.lineTo(70, 100);
  ctx.stroke(); // 此时使用默认黑色
};

first();
second();

3. 封装独立绘制函数

将绘制逻辑与样式参数绑定，每个函数完全控制自己的状态：

const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");

// 通用线条绘制函数，默认使用黑色描边
function drawLine(x1, y1, x2, y2, strokeColor = "black") {
  ctx.save();
  ctx.beginPath();
  ctx.strokeStyle = strokeColor;
  ctx.moveTo(x1, y1);
  ctx.lineTo(x2, y2);
  ctx.stroke();
  ctx.restore();
}

// 调用时传入样式参数
drawLine(20, 20, 20, 100, "red");
drawLine(20, 100, 70, 100); // 未传参数，使用默认黑色

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