如何设置 Paper.js 画布背景填充颜色（无 CSS 背景）

Question

我正在制作一个 paper.js 动画。动画包含多个路径。我正在使用ccapture.js 将动画导出到视频中。 ccapture.js 所做的就是逐帧捕捉画布上的绘图并转换成视频。

我面临的问题是，在动画中我希望画布的背景颜色为白色。如果我使用 css background-color: white; ccapture 设置画布的背景颜色，ccapture 将忽略此颜色，并且捕获的视频中的背景颜色将为黑色，因为白色未在画布上绘制，并且只是元素的背景。我已经测试过这种方法，但没有运气。

我尝试在动画中添加一个白色矩形路径，但它隐藏了动画，我只能看到白色矩形。我从关注answer 中找到了使用sentToBack() 将白色矩形放在后面的函数的引用，我正在这样使用它：

var rect = new Path.Rectangle({
    point: [0, 0],
    size: [view.size.width / 2, view.size.height / 2],
    strokeColor: 'white',
    fillColor: 'white',
    selected: true
});
rect.sendToBack();

我在 paper.js 文档中找不到这个函数的参考，所以我不确定我是否以正确的方式使用它。

我还尝试在 paperscript 的开头和 paperscript 的结尾创建矩形，认为创建路径的顺序可能会解决问题。但这也无济于事。

有没有其他方法可以将画布的背景填充颜色设置为白色。请向我询问更多详细信息。 提前致谢。

Answer 1

在@Kostas 回答之后。我再次检查了我创建的其他路径的代码。我将blendMode: 'screen' 与我创建的其他路径一起使用。这导致其他路径与屏幕融合：docs 删除此属性后，它按预期工作。

相关信息：sendToBack() 的工作方式与我在代码中使用的一样。

路径按照它们在paperscript中创建的顺序堆叠。第一个创建的路径将在所有其他路径下（除非使用sendToBack() 或insertBelow() 方法更改z-index）

希望它能帮助其他人..

Answer 2

您必须在 rect 创建后定义颜色。

试试这个：

var rect = new Path.Rectangle({
    point: [0, 0],
    size: [view.size.width / 2, view.size.height / 2],
    strokeColor: 'white',
    selected: true
});
rect.sendToBack();
rect.fillColor = '#ff0000';