如何將背景圖像設置爲畫布

-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

如何將背景圖像設置爲畫布

回答

相關問題