캔버스로 떨어지는 눈에 구름 (이미지)을 삽입하는 가장 쉬운 방법 + JavaScript

Question

캔버스 떨어지는 눈 솔루션을 webbreakstuff에서 채택했습니다.

이제이 눈이 구름에서 떨어지는 것처럼 보이게하고 싶습니다.

구름 이미지가 있습니다. cloud.png

그래서 같은 자바 스크립트를 통해 그것을 만들 싶습니다

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

지금, 나는 그것이 두 캔버스의 한 (중 bgcanvas 또는 fgcanvas)의 앞 그릴 갖고 싶어하지만 난 방법을 알아낼 수 없습니다 context.drawImage에 따라 올바르게 수행하십시오.

누군가이 이미지를 어디에 넣어야하는지, 어떻게 그렇게 할 수 있는지 설명해 주시겠습니까?

감사합니다.

Answer 1

그래서 두 개의 캔버스 요소 인 fgcanvas와 bgcanvas가 있고 fgcanvas가 앞에 있습니다.

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; 

눈 오딘에서 그려야합니다.