Javascript 如何为舞台或图层添加背景色？

我有一个舞台和一层

var stage = new Kinetic.Stage({
    container: 'container',
    width    : STAGE_WIDTH,
    height   : STAGE_HEIGHT
});

var layer = new Kinetic.Layer();

我已将页面颜色设置为bbb

---

我想把画布的颜色设置为白色。但是我似乎找不到一种方法或方法来为舞台本身或我添加所有对象的层添加背景色。

没有API方法来添加背景色

而是添加一个覆盖该层的彩色矩形

---

当然，在所有其他形状之前添加背景矩形。

您还可以通过CSS设置容器元素的背景颜色。这与设置舞台的背景色基本相同。如前所述，如果您希望在图层级别设置背景，则需要添加一个填充矩形或类似形状。

您可以使用JavaScript更改背景颜色

document.getElementById('container').style.background = '#fff';

---

我也有同样的问题，我想添加一个“背景”。我添加了一个100%高度和宽度的矩形，代码如下：

var rect = new Kinetic.Rect({
            x: 0,
            y: 0,
            width: stageDimensions.width, //full width
            height: stageDimensions.height, //full height
            fill: 'white', //background color
        });
layer.add(rect);

因为我希望能够删除“背景”，这就是我解决问题的方法

---

希望它能帮助您。

老问题，但您可以使用

获取舞台的属性，填充一个完整的矩形，将其添加到层中，然后再进行其他操作。示例代码：

var stage = new Kinetic.Stage({
  container: 'canvas-container',
  width: 900,
  height: 450
});

// create background
var stageBg = new Kinetic.Rect({
  x: 0,
  y: 0,
  width: stage.getWidth(),
  height: stage.getHeight(),
  fill: "rgb(40,40,40)"
});

layer.add(stageBg);
stage.add(layer);

+1这是推荐的方法，因为在容器DOM级别不需要canvas。还值得注意的是，您可以访问content DOM元素，该元素由KineticJS创建并直接嵌套在容器中。此内容节点包含所有层画布。您可以像这样访问这个元素-var contentDiv=stage.getContent（）我尝试用background和background color属性在CSS中设置背景，但没有什么不同。我的画布与CSS中指定的颜色相同。你能分享一个示例来说明背景是如何不适合你的吗？下面是一个简单的JSFIDLE，它展示了如何处理页面的背景、容器div以及kinetic为您创建的子容器。
var stage = new Kinetic.Stage({
  container: 'canvas-container',
  width: 900,
  height: 450
});

// create background
var stageBg = new Kinetic.Rect({
  x: 0,
  y: 0,
  width: stage.getWidth(),
  height: stage.getHeight(),
  fill: "rgb(40,40,40)"
});

layer.add(stageBg);
stage.add(layer);