如何将背景图像设置为画布

-2

嗯，我想设置一个background-image深度，而不是那个退化的背景。我尝试了很多东西，我尝试了很多来自这个社区的答案，并且没有办法......结果是background-image不可见或颗粒之上。我只想要background-image取代目前的background-color。如何将背景图像设置为画布

我希望任何人都能够帮助我使用正确的代码，谢谢并对我的英语感到抱歉。

https://codepen.io/at80/pen/tqdmv

<canvas>

来源

2017-07-29 Menzezzz

欢迎来到Stack Overflow。如果你想调试帮助你必须创建一个[最小可验证的完整示例]（https://meta.stackoverflow.com/questions/349789/how-do-i-create-a-minimal-complete-verifiable-example）并把它**在问题本身**。只需发布一个链接到您的代码是不可接受的。 – gman

我将无法完全回答你的问题，因为有很多的着色器代码翻阅。

你需要做的是确保当一个片段绘制不是叶子的东西（例如背景）时，它的alpha值为0.0。最简单的办法是在gl_FragColor.a = 0.0;的某处。我是OpenGL/WebGL的新手，因此无法找到确切的位置或方法来帮助您。

你有相当多的片段着色器，他们每个人做不同的事情。着色器<script id="bg_fsh" type="x-shader/x_fragment">仅控制背景，但它本身不够。

一旦设法在片段着色器中使背景变得透明，您可以以某种方式设置背景图像，例如在包含画布的<div>上，并且应该显示透明。

来源

2017-07-29 15:56:57

是的，我做到了，但我只实现了黑色背景，在我的代码中，我拥有它。 – Menzezzz

@Menzezzz你可以使用CSS混合模式（混合混合模式/背景混合模式）与DOM元素本身，如“屏幕”混合你的最终图像与黑色。但是，webgl +混合在性能方面可能有点昂贵。 – K3N

我做到了！只是我尝试更改gl_FragColor.a值之前，但所有屏幕变黑......没有花，但我认为当我改变它没有背景图像。在尝试了很多我再次尝试的事情之后立即进行Rigth，并且我记得这一点，谢谢你。而就在我现在想或离开它时，我发现这个价值并且工作！ TY – Menzezzz

-2

不能直接设置画布图像的背景图像。 stackoverflow.com的这个链接将介绍更多的可能性，设定背景图片 Is it possible to set background image in canvas HTML5 and can do some paint functionality like Undo,Erase,Clear,Save that background image?

来源

2017-07-29 15:46:19

如何将背景图像设置为画布

回答

相关问题