Question

每个新图像应具有不同的src。直到重新加载所有图像，才具有单个src。可以添加location.reload（）;直到添加新图像，然后scr才会更改。但是重装很明显。是否存在仅重新加载scr的方法？

var cvs;
var ctx;
cvs = document.getElementById("canvas");
ctx = cvs.getContext("2d");

var width_path_near = 80,
width_path_far = 30;

var tree1 = new Image(); 
var tree2 = new Image(); 
var tree3 = new Image(); 
var tree4 = new Image(); 

tree1.src = "https://png.pngtree.com/element_origin_min_pic/00/02/61/6156839a2a633b7.jpg";
tree2.src = "http://s02.yapfiles.ru/files/457732/derevo_1.png";
tree3.src = "http://www.grafamania.net/uploads/posts/2014-06/1401644723_1-9.jpg";
tree4.src = "http://img11.txapela.ru/e/c/c/4/f/52e052f118c7b8ff9317385f581.jpg";

var masTree=[tree1, tree2, tree3, tree4];
var randTree=Math.floor(Math.random()*masTree.length);   

var tree_size = 100;
var grow = 0.2;
var gap = 100;
var forest = [];

forest[0] = {
    x : cvs.width/2-width_path_near-tree_size/2,
    y : cvs.height/2-tree_size+10,
    size :  tree_size   
}

function draw() { 
    ctx.fillStyle = "rgb(84,209,216)";  
    ctx.fillRect(0, 0, 1000, 600);  

    for (var i=0; i<forest.length; i++){
 ctx.drawImage(masTree[randTree], forest[i].x, forest[i].y, forest[i].size, forest[i].size); 

        if(forest[i].y == 3*cvs.height/4){
            forest.push({
                y : cvs.height/2-tree_size+10,
                x : cvs.width/2-width_path_near-tree_size/2,
                size :  tree_size   
            });
        }

        forest[i].y += 0.5;
        forest[i].x -= 0.4;
        forest[i].size +=  0.4;
    }   

     requestAnimationFrame(draw);
}

masTree[randTree].onload = draw;

http://jsfiddle.net/Nata_Hamster/ugyb1fd0/

刷新图像而无需重新加载页面

0 个答案: