JavaScript 中怎么用解构赋值提取 Canvas 绘图上下文-js教程-PHP中文网

canvasrenderingcontext2d对象不可直接解构全部属性，因其多为getter/setter且不可枚举；但可安全解构fillstyle、strokestyle、linewidth等已知可读属性获取当前值快照，方法如fillrect则不可解构，需通过ctx调用。

javascript 中怎么用解构赋值提取 canvas 绘图上下文

Canvas 绘图上下文（`CanvasRenderingContext2D`）本身是一个对象，但**它不是普通可枚举的对象**，不能像 `const { fillStyle, lineWidth } = ctx` 这样直接解构出所有常用属性——因为它的属性大多为**getter/setter**，且许多是只写或只读，部分甚至不被 `Object.keys()` 或 `for...in` 遍历到。

不过，你仍可以有选择地、安全地对 已知存在的、可读的属性 进行解构赋值，用于简化代码或临时提取配置。关键在于：只解构你明确需要、且确认在当前上下文上可访问的属性。

✅ 可安全解构的常用只读/可读写属性

以下属性在 `ctx` 实例上稳定存在，支持解构（注意：它们是动态 getter，解构得到的是当前值的快照，不是响应式绑定）：

fillStyle：填充颜色或样式
strokeStyle：描边颜色或样式
lineWidth：线条宽度
lineCap：线端样式（"butt"/"round"/"square"）
lineJoin：连接处样式（"miter"/"round"/"bevel"）
globalAlpha：全局透明度
font：文本字体设置
textAlign、textBaseline：文本对齐方式

示例：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 安全解构（只取你需要的）
const { fillStyle, strokeStyle, lineWidth, font } = ctx;

console.log(fillStyle); // 当前填充色，如 "#000"
ctx.fillStyle = 'red';  // 修改原 ctx
console.log(fillStyle); // 仍是旧值 —— 解构是值拷贝，非引用！

⚠️ 不能解构的方法（如 `fillRect`、`beginPath`）

方法是函数，属于原型链（`CanvasRenderingContext2D.prototype`），不在实例自身属性中，解构会得到 undefined：

const { fillRect, beginPath } = ctx;
console.log(fillRect); // undefined ❌

正确做法：保持用 ctx.fillRect(...) 调用；若需复用，可单独提取：

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

const { fillRect, strokeRect } = ctx;
// 但必须确保调用时 this 指向正确：
fillRect.call(ctx, 10, 10, 100, 100); // ✅ 手动绑定 this

? 实用技巧：解构 + 默认值 + 重命名

结合解构语法提升可读性与容错性：

const {
  fillStyle: fillColor = '#000',
  strokeStyle: strokeColor = '#333',
  lineWidth: thickness = 1,
  font: textFont = '16px sans-serif'
} = ctx;

// 后续绘图逻辑直接用语义化变量
ctx.fillStyle = fillColor;
ctx.font = textFont;
ctx.fillText('Hello', 50, 50);