Question

我正在研究paper.js动画。动画包含多个路径。我使用ccapture.js导出视频中的动画。 ccapture.js的作用是逐帧捕获画布并将其转换为视频。

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

我尝试在动画中添加白色矩形路径，但它隐藏了动画，我只能看到白色矩形。我找到了一个函数的引用，使用sentToBack()跟随answer使用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();将白色矩形放在后面，我这样使用它：

LaunchApp:WriteTag

我无法在paper.js文档中找到此函数的引用，因此我不确定我是否以正确的方式使用它。

我也尝试在撰写起稿以及结束稿件时创建矩形，认为创建路径的顺序可能会解决问题。但它也没有帮助。

还有其他方法可以将画布的背景填充颜色设置为白色。请告诉我更多详情。提前谢谢。

Answer 1

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

相关信息：sendToBack()正如我在代码中使用的那样。

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

希望它能帮助别人..

Answer 2

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

试试这个：

＆＃13;

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

＆＃13;

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

2 个答案: