So stellen Sie das Hintergrundbild auf Canvas ein

Question

Nun, ich möchte eine background-image Tiefe festlegen, anstatt dieser degradierten Hintergrund. Ich habe viele Dinge ausprobiert, ich habe viele Antworten aus dieser Community ausprobiert, und keinesfalls ... das Ergebnis ist immer mit dem background-image nicht sichtbar oder über den Partikeln. Ich möchte nur, dass die background-image die aktuelle background-color ersetzt.

Ich wünsche, dass jemand mir mit dem richtigen Code helfen kann, danke und Entschuldigung für mein Englisch.

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

<canvas> 

Answer 1

ich voll und ganz in der Lage, nicht auf Ihre Frage zu beantworten, da es eine Menge von Shader-Code ist durch zu suchen.

Was Sie tun müssen, ist sicherzustellen, dass wenn ein Fragment etwas zeichnet, das kein Blatt ist (z. B. der Hintergrund), es einen Alpha-Wert von 0.0 hat. Am einfachsten wäre es, irgendwo gl_FragColor.a = 0.0; zu haben. Ich bin neu in OpenGL/WebGL, deshalb kann ich Ihnen nicht helfen, indem ich die genauen Standorte oder Methoden dafür finde.

Sie haben ziemlich viele Fragment-Shader und sie machen jeweils unterschiedliche Dinge. Der Shader <script id="bg_fsh" type="x-shader/x_fragment"> steuert nur den Hintergrund, reicht aber alleine nicht aus.

Sobald Sie es geschafft haben, den Hintergrund in den Fragment-Shadern transparent zu machen, können Sie ein Hintergrundbild irgendwie, wie auf einer <div>, die die Leinwand enthält, und es sollte durch zeigen.

Answer 2

Sie können nicht direkt Hintergrundbild der Leinwand Bild gesetzt. Dieser Link von stackoverflow.com mehr über die Möglichkeit beschreibt Hintergrundbild Is it possible to set background image in canvas HTML5 and can do some paint functionality like Undo,Erase,Clear,Save that background image?