javascript – 如何设置Paper.js画布背景填充颜色(无CSS背景)

2023年3月3日 353次阅读

我正在研究paper.js动画.动画包含多个路径.我正在使用 ccapture.js在视频中导出动画.

ccapture.js的作用是逐帧捕获画布并将其转换为视频.

我面临的问题是,在动画中我希望画布的背景颜色为白色.如果我使用css background-color设置画布的背景颜色：白色; 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文档中找到此函数的引用,所以我不确定我是否以正确的方式使用它.

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

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

最佳答案 在@Kostas回答之后.我再次检查了我创建的其他路径的代码.我使用了blendMode：’screen’和我创建的其他路径.这导致其他路径与屏幕混合： docs

删除此属性后,它按预期工作.

相关信息：sendToBack()的工作原理与我在代码中使用的一样.

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

希望它会帮助别人..

点赞