在Canvas开发中，如何用ES5/ES6减少重复输入ctx的操作？

当然有办法解决这个问题啦！写Canvas图形代码时，反复敲ctx确实有点繁琐，下面分享几个ES5和ES6都适用的简化方案，按需选择就行：

1. 短变量别名（最通用、无副作用） #

这是最简单直接的方法，把ctx赋值给一个更短的变量，比如c或者你能快速识别的缩写，之后全程用这个别名代替：

// 获取上下文
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// 定义别名
const c = ctx;

// 后续直接用c操作
c.fillStyle = '#ff0000';
c.fillRect(10, 10, 50, 50);
c.strokeStyle = '#000';
c.strokeRect(10, 10, 50, 50);

这个方法兼容性拉满，ES5和ES6都能用，而且完全不会有作用域或者性能问题，新手也能快速上手。

2. ES6解构赋值（提取常用方法/属性） #

如果你的代码里频繁用到某几个Canvas方法（比如fillRect、beginPath、arc），可以用ES6的解构赋值把这些方法从ctx里提取出来，直接调用方法名：

const { fillRect, beginPath, arc, stroke } = ctx;

// 直接调用方法
ctx.fillStyle = '#00ff00'; // 属性还是通过ctx修改更稳妥
fillRect(20, 20, 60, 60);

beginPath();
arc(100, 100, 30, 0, Math.PI * 2);
stroke();

⚠️ 注意：像fillStyle这种属性，解构出来的是当前值的副本，直接给解构后的变量赋值不会同步到ctx上，所以属性操作还是用原ctx或别名更靠谱。解构更适合提取高频使用的方法。

3. 封装工具函数/类（适合复杂项目） #

如果你的项目里有大量Canvas绘图逻辑，不如把重复的操作封装成工具函数或者类，把ctx的调用隐藏在内部，外部只用调用封装好的方法：

ES5风格工具函数 #

// 封装矩形绘制函数
function drawRect(x, y, width, height, color) {
  ctx.fillStyle = color;
  ctx.fillRect(x, y, width, height);
}

// 封装圆形绘制函数
function drawCircle(x, y, radius, color) {
  ctx.beginPath();
  ctx.arc(x, y, radius, 0, Math.PI * 2);
  ctx.fillStyle = color;
  ctx.fill();
}

// 调用时超简洁
drawRect(30, 30, 70, 70, '#0000ff');
drawCircle(150, 150, 40, '#ff9900');

ES6类风格 #

class CanvasPainter {
  constructor(ctx) {
    this.ctx = ctx;
  }

  rect(x, y, w, h, color) {
    this.ctx.fillStyle = color;
    this.ctx.fillRect(x, y, w, h);
  }

  circle(x, y, r, color) {
    this.ctx.beginPath();
    this.ctx.arc(x, y, r, 0, Math.PI * 2);
    this.ctx.fillStyle = color;
    this.ctx.fill();
  }
}

// 初始化后调用
const painter = new CanvasPainter(ctx);
painter.rect(40, 40, 80, 80, '#ff00ff');
painter.circle(200, 200, 50, '#333');

这种方式不仅能减少ctx的重复输入，还能让代码更模块化，维护起来更方便。

4. 慎用with语句（不推荐） #

ES5里有个with语句，可以把ctx作为上下文，在代码块里直接使用它的属性和方法：

with(ctx) {
  fillStyle = '#ccc';
  fillRect(50, 50, 90, 90);
  strokeRect(50, 50, 90, 90);
}

但非常不推荐使用：它会打乱JS的作用域规则，容易引发变量名冲突，而且JS引擎无法对with代码块进行优化，会影响性能。现代前端开发几乎已经抛弃了这个语法，所以尽量别用。

5. 箭头函数绑定上下文（适合回调场景） #

如果在动画循环、事件回调这类场景里需要频繁用ctx，可以用ES6箭头函数捕获外部的ctx，不用额外传递或者重复获取：

function animate() {
  requestAnimationFrame(animate);
  // 清除画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 箭头函数直接用外部的ctx
  const drawMovingCircle = (x, y) => {
    ctx.beginPath();
    ctx.arc(x, y, 20, 0, Math.PI * 2);
    ctx.fillStyle = '#f00';
    ctx.fill();
  };

  // 调用绘制函数
  drawMovingCircle(Date.now() / 10 % canvas.width, 100);
}
animate();

箭头函数会继承外部作用域的变量，所以内部可以直接使用外部定义的ctx，不用额外处理。

总的来说，最推荐的是变量别名和解构赋值（针对方法），简单高效；复杂项目可以考虑封装工具函数或类。with语句尽量避开，避免踩坑。

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