Javascript数组图像在画布上移动

Question

我是javascript的新手，正在尝试为作业制作雪的动画。

到目前为止，我已经能够创建一些小的背景雪（随机大小的圆圈），但我想使用一些雪花png文件来获得更多移动的雪。这就是我所拥有的，但我很确定图像部分是非常错误的。

真的不确定如何使这项工作，所以任何提示将不胜感激。

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var colours = ["white", "azure", "floralwhite", "#EAEDED"];
var r = 3.5;
var snow = [];

for (var i=0;i<1000;i++){
    var s = {
        x : i*2, 
        y : 0,
        colour : colours[Math.round(Math.random()*colours.length)],
        dx : Math.random(),
    dy : Math.random()*3,
  }
  snow.push(s);
}

var flakes = ["flak1", "flak2", "flak3"];
    flak1 = new Image();
        flak1.src = "snow1.png";
    flak2 = new Image();
        flak2.src = "snow2.png";
    flak3 = new Image();
        flak3.src = "snow3.png";


for (var e=0;e<10;e++){
     var f = {
        x: e*2,
        y: 0,
        image: flakes[Math.round(Math.random()*flakes.length)],
        dx: Math.random(),
        dy: 1,
    }
    flakes.push(f);
}

var grd = context.createLinearGradient(0,0,0,500);
        grd.addColorStop(0, "#85C1E9");
        grd.addColorStop(1, "#EBF5FB");

function itSnows(){

//draw background      
    context.fillStyle = grd;    
    context.fillRect(0,0,canvas.width,canvas.height);

    context.fillStyle = "white";
    context.fillRect(0,650,canvas.width,50);

    house = new Image();
        house.src = "house.png";
            context.drawImage(house, 10, 490,200,200);
            context.drawImage(house, 200, 490,300,200);
            context.drawImage(house, 480, 490,250,200);
            context.drawImage(house, 740, 490,200,200);
            context.drawImage(house, 950, 490,250,200);
    sun = new Image();
        sun.src = "sun.png";
        context.drawImage(sun,0,0,600,350);

//draw snow 
    for(var i=0;i<snow.length;i++){
        context.fillStyle = snow[i].colour;
        context.beginPath();
        context.arc(snow[i].x,snow[i].y,r*Math.random(),0,2*Math.PI);
        context.fill();    

            snow[i].y = (snow[i].y + snow[i].dy) % 700; 
            snow[i].x = (snow[i].x + snow[i].dx) % canvas.width;  


//draw flakes        
    for (var e=0;e<flakes.length;e++){
         context.drawImage(flakes[e], flakes[e].x, flakes[e].y, 30, 30);

            flakes[e].y = (flakes[e].y + flakes[e].dy) % 700; 
            flakes[e].x = (flakes[e].x + flakes[e].dx) % canvas.width;  
        }   
    }
 }

setInterval(itSnows, 25);