函数柯里化在Canvas绘图中用于预设固定样式参数，分离配置与绘制逻辑，提升复用性；通过封装“设样式+执行绘制”为单函数，实现一次配置、多次调用，避免重复设置ctx属性导致的状态污染。
函数柯里化在 Canvas 绘图工具中主要用于**预设固定样式参数，分离“配置”与“绘制”逻辑**，让绘图调用更简洁、复用性更强。它不直接操作 Canvas API，而是帮你把重复传入的样式（如 strokeStyle、lineWidth、font）提前固化，后续只需传坐标或内容即可执行绘制。
为什么 Canvas 场景适合用柯里化
Canvas 的 2D 上下文方法（如 strokeRect、fillText、beginPath）本身不带样式参数，样式需通过 ctx 属性（ctx.strokeStyle、ctx.font 等）提前设置。若多个图形共用同一套样式，每次绘制都手动设一遍容易出错、难维护。柯里化可封装「设样式 + 执行绘制」为一个函数，实现一次配置、多次调用。
常见预设样式组合的柯里化写法
以下以普通函数方式实现柯里化（避免箭头函数导致 fn.length 失效），支持单次/分批传参：
- 预设描边矩形样式：固定颜色、线宽、是否填充
function createStrokeRect(ctx) {
return function(strokeColor, lineWidth, fill = false) {
return function(x, y, w, h) {
ctx.strokeStyle = strokeColor;
ctx.lineWidth = lineWidth;
if (fill) {
ctx.fillStyle = strokeColor;
ctx.fillRect(x, y, w, h);
} else {
ctx.strokeRect(x, y, w, h);
}
};
};
}
立即学习“Java免费学习笔记（深入）”；
使用示例：
const redBox = createStrokeRect(ctx)('#f00', 2);
redBox(10, 10, 100, 50); // 红色描边框
redBox(120, 10, 100, 50); // 同样样式，复用无压力
- 预设文字渲染函数：固定字体、大小、对齐、颜色
function createTextRenderer(ctx) {
return function(font, fillStyle, textAlign = 'left', textBaseline = 'alphabetic') {
return function(text, x, y) {
ctx.font = font;
ctx.fillStyle = fillStyle;
ctx.textAlign = textAlign;
ctx.textBaseline = textBaseline;
ctx.fillText(text, x, y);
};
};
}
使用示例：
const titleText = createTextRenderer(ctx)('bold 16px sans-serif', '#333', 'center');
titleText('主标题', 200, 40);
titleText('副标题', 200, 70);
结合 Canvas 工具类做模块化封装
实际项目中，建议将柯里化逻辑封装进绘图工具类，避免全局污染，也便于统一管理 ctx 状态：
- 定义
CanvasPainter类，接收ctx实例 - 在构造函数中预置常用柯里化方法（如
this.drawCircle = curry(drawCircle)(ctx)） - 所有预设函数都绑定当前实例的
ctx，无需每次传入
这样调用时就像：
const painter = new CanvasPainter(ctx);
const blueCircle = painter.circle('#00f', 3);
blueCircle(100, 100, 20); // 蓝色描边圆，线宽 3
注意事项
Canvas 是状态机，柯里化函数内部应确保样式设置与绘制操作成对出现，避免意外污染后续绘制。例如：
- 不要在柯里化函数中只设
ctx.strokeStyle就返回，而没执行绘制——这会留下残留状态 - 若需临时修改样式后恢复（如画虚线再切回实线），可在函数末尾保存并还原关键属性，或改用
ctx.save()/ctx.restore() - 避免在 render 循环中反复调用柯里化工厂函数（如
createTextRenderer(ctx)），应在初始化阶段完成预设
