web-dev-qa-db-ja.com

ファブリックjsの使用中にキャンバスの背景色を変更する必要があります

私はcanvas要素を持っていて、それからファブリックオブジェクトを作成します。ここで、背景色を動的に変更したいと思います。以下は私にはうまくいきません。

var x;

x = new fabric.Canvas("mycanvas", {
      backgroundColor : "#fff",
      selection: true
   });

x.backgroundColor = "#f00";

背景色は白で、赤には変わりません。

javascripthtml5-canvasfabricjs
11
viji

オブジェクトのプロパティは単なるプロパティであり、イベントによって処理されないため、プロパティを変更した後にキャンバスをレンダリングする必要があります

http://jsfiddle.net/oceog/gDhht/

var canvas = new fabric.Canvas('c',{backgroundColor : "#0ff"});
console.log(canvas);
canvas.backgroundColor="red";
canvas.renderTop();
canvas.add(
  new fabric.Rect({ top: 100, left: 100, width: 50, height: 50, fill: '#f55' }),
  new fabric.Circle({ top: 140, left: 230, radius: 75, fill: 'green' }),
  new fabric.Triangle({ top: 300, left: 210, width: 100, height: 100, fill: 'blue' })
);

canvas.backgroundColor="green";
canvas.renderAll();
​
20
zb'