在 Fabric JS 中更改 Canvas 的背景答案

【问题标题】：Change background of Canvas in Fabric JS在 Fabric JS 中更改 Canvas 的背景
【发布时间】：2015-07-30 18:00:16
【问题描述】：

我正在尝试更改 Canvas 的背景。我可以更改画布的背景，但是一旦我单击背景。它重新加载原始背景并且不显示更改的背景。希望你明白我想说什么。以下是实现更改背景的代码。基于选择框，图像将加载

HTML

<div id="wrapper">
    <div class="canvas-container" style="float:left;">
        <canvas id="c" width="500" height="500" style="border:1px solid #ccc">     </canvas>
    </div>
</div>

<select id="color" class="styled-select">
    <option value="red">Red</option>
    <option value="green">Green</option>
    <option value="purple">Purple</option>
</select>

脚本

var canvas = new fabric.Canvas('c');
canvas.setBackgroundImage("red.png", canvas.renderAll.bind(canvas));
$('select#color').on('change', function() {
    var imageName=this.value+".png"
    var canvas = new fabric.Canvas('c');
    canvas.setBackgroundImage(imageName, canvas.renderAll.bind(canvas));
})

【问题讨论】：

你能否为你的问题创建一个小提琴，以便更好地理解它！
删除第二个var canvas = new fabric.Canvas('c');怎么样？
哦！我的错，我每次都在创建新的画布对象，这就是它发生的原因。谢谢你指出我正确的方向@sapics。实际上，我是 magento 开发人员，并使用织物和 magento 实现了一些东西。

标签： jquery html css canvas fabricjs

【解决方案1】：

欢迎来到堆栈溢出！

你有两次var canvas = new fabric.Canvas('c');。删除最后一个。

要更改背景颜色，您只需要canvas.backgroundColor 属性：

$('select#color').on('change', function() {
    canvas.backgroundColor = this.value;
    canvas.renderAll();
});

我为此创建了一个小提琴：http://jsfiddle.net/q6Y6k/15/

我希望这会有所帮助。

【讨论】：