fabric.js调用fabric.Rect的setGradient方法报不是函数错误如何解决

AI 小北

2026-10-11

问题解决方案

报错核心原因

rect.setGradient is not a function 报错通常有以下两类触发原因：

使用了1.x版本的fabric.js，setGradient 实例方法是2.0版本之后才新增的API
引入的是自定义裁剪的精简版fabric.js，渐变相关模块被移除

可行解决办法

方案1：升级到兼容版本（推荐）

将fabric.js升级到2.x及以上的官方稳定完整版，再按照规范调用API即可，示例代码如下：

const canvas = new fabric.Canvas('your-canvas-id');
const rect = new fabric.Rect({
    top: 0,
    left: 0,
    width: canvas.width,
    height: canvas.height,
    fill: "#000"
});
// 设置从左到右的线性渐变
rect.setGradient('fill', {
    x1: 0,
    y1: 0,
    x2: rect.width,
    y2: 0,
    colorStops: {
        0: '#000',
        1: '#2385bb'
    }
});
canvas.add(rect);
canvas.renderAll();

方案2：1.x版本兼容写法

如果无法升级fabric.js版本，可以直接给fill属性赋值fabric.Gradient实例实现同等效果：

const canvas = new fabric.Canvas('your-canvas-id');
const rect = new fabric.Rect({
    top: 0,
    left: 0,
    width: canvas.width,
    height: canvas.height
});
// 1.x版本渐变设置方式
rect.fill = new fabric.Gradient({
    type: 'linear',
    coords: {
        x1: 0,
        y1: 0,
        x2: rect.width,
        y2: 0
    },
    colorStops: [
        { offset: 0, color: '#000' },
        { offset: 1, color: '#2385bb' }
    ]
});
rect.dirty = true;
canvas.add(rect);
canvas.renderAll();