Question

我有一个Kinetic JS舞台和一个图层

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

var layer = new Kinetic.Layer();

我将页面颜色设置为#bbb。

body {
        background: #bbb;
    }

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

Answer 1

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

Answer 2

我有同样的问题，我想添加＆＃34;背景＆＃34;。我添加了一个100％高度和宽度的rectagle，代码为：

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);

由于我希望能够删除＆＃34;背景＆＃34;，这就是我设法解决问题的方法。

希望它对你有所帮助。

Answer 3

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

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

Answer 4

没有用于添加背景颜色的API方法。

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

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

Answer 5

旧问题，但您可以使用舞台的get属性，并填充完整的矩形，然后将其添加到图层中。示例代码：

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);

如何为Kinetic JS舞台或图层添加背景颜色？

5 个答案: