Javascript 如何设置Paper.js画布背景填充颜色(无CSS背景)
我正在制作一个paper.js动画。动画包含多个路径。我正在使用导出视频中的动画。 ccapture.js所做的是在画布上逐帧捕获图形并将其转换为视频 我面临的问题是,在动画中,我希望画布的背景色为白色。如果我使用cssJavascript 如何设置Paper.js画布背景填充颜色(无CSS背景),javascript,html,canvas,paperjs,Javascript,Html,Canvas,Paperjs,我正在制作一个paper.js动画。动画包含多个路径。我正在使用导出视频中的动画。 ccapture.js所做的是在画布上逐帧捕获图形并将其转换为视频 我面临的问题是,在动画中,我希望画布的背景色为白色。如果我使用cssbackground color:white设置画布的背景色ccapture将忽略此颜色,捕获的视频中的背景色将为黑色,因为白色不是在画布上绘制的,而是元素的唯一背景。我测试过这个方法,但运气不好 我曾尝试在动画中添加白色矩形路径,但它隐藏了动画,我所能看到的只是白色矩形。我使用
background color:white设置画布的背景色代码>ccapture将忽略此颜色,捕获的视频中的背景色将为黑色,因为白色不是在画布上绘制的,而是元素的唯一背景。我测试过这个方法,但运气不好
我曾尝试在动画中添加白色矩形路径,但它隐藏了动画,我所能看到的只是白色矩形。我使用下面的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的开头和结尾创建矩形,认为创建路径的顺序可能会解决这个问题。但这也无济于事
是否有其他方法可以将画布的背景填充颜色设置为白色。请问我更多的细节。
提前感谢。您必须在创建rect
后定义颜色
试试这个:
var rect=新路径矩形({
点:[0,0],
大小:[view.size.width/2,view.size.height/2],
strokeColor:'白色',
所选:真
});
rect.sendToBack();
rect.fillColor='#ff0000'@Kostas answer后面的代码>。我再次检查了我创建的其他路径的代码。我使用了blendMode:“screen”
和我创建的其他路径。这导致其他路径与屏幕混合:
删除此属性后,它按预期工作
相关信息:sendToBack()
的工作原理与我在代码中使用的相同
路径按照在paperscript中创建的顺序堆叠。第一个创建的路径将位于所有其他路径下(除非未使用sendToBack()
或insertdown()方法更改z索引)
希望它能帮助其他人。谢谢@Kostas!它是这样工作的。你能解释一下它是怎么工作的吗?好的,我的错。。实际上是blendmode:'screen'
导致了问题。即使我们在构造函数对象中提到fillColor
,它也可以工作。