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

Question

我正在制作一个 paper.js 动画，其中包含多个路径。我使用 ccapture.js 导出视频动画。 ccapture.js 的作用是逐帧捕捉 canvas 上的绘图并将其转换为视频。

我的问题在于，在动画中我想让 canvas 的背景色为白色。如果我使用 CSS 设置 canvas 的背景颜色为 background-color: white;，ccapture 将忽略此颜色，并且捕获的视频中的背景颜色将是黑色，因为白色颜色没有绘制在 canvas 上，只是该元素的背景。我已经尝试过这种方法但没有成功。

我尝试在动画中添加一个白色矩形路径，但它会隐藏动画，我只能看到白色矩形。我在以下 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的开头和结尾创建矩形，认为创建路径的顺序可能会解决问题。但它也没有帮助。

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

- Akash K.

Answer 1

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

相关信息：代码中使用的sendToBack()函数有效。

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

希望能帮助其他人...

- Akash K.

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

- Kostas

---

谢谢 @Kostas！这个方法有效。你可以解释一下它的原理吗？ - Akash K.

好的，我的错..实际上是blendmode:'screen'导致了问题。即使我们在构造函数对象中提到fillColor，它也可以正常工作。 - Akash K.