Einfachste Möglichkeit, Wolke (Bild) in fallenden Schnee mit Leinwand + JavaScript

Question

einfügen Ich habe eine Canvas Falling Snow-Lösung von webbreakstuff angenommen.

Nun möchte ich es so aussehen lassen, als würde dieser Schnee aus einer Wolke fallen.

Ich habe eine Wolke Bild, cloud.png.

Ich möchte es per JavaScript erstellen wie folgt:

var cloud = new Image(); 
cloud.src = "cloud.png"; 

Jetzt will ich es vor einem der beiden Leinwand von zeichnen haben (entweder bgcanvas oder fgcanvas), aber ich kann nicht herausfinden, wie um das ordnungsgemäß in Übereinstimmung mit der context.drawImage zu tun.

Könnte jemand mir helfen, herauszufinden, wo dieses Bild zu platzieren ist, und wie?

Danke.

Answer 1

Sie haben also zwei Canvas-Elemente, fgcanvas und bgcanvas, fgcanvas ist vorne.

var cloud = new Image(); 
cloud.src = "cloud.png"; 
//I am assuming that both canvases are in the same position. 
var ctx = fgcanvas.getContext('2d'); 
ctx.drawImage(cloud, sourceOfSnowX, sourceOfSnowY; 

Sollte cloud.png am Ursprung des Schnees zeichnen.