主页 / 问题 / 863678
Accepted
Natalya
Asked:2020-08-03 01:09:27 +0000 UTC2020-08-03 01:09:27 +0000 UTC

如果全局声明数组的空元素，该函数不起作用，为什么？

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

function draw() { 

    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);
}

http://jsfiddle.net/Nata_Hamster/et7f9p6w/

如果在这种情况下将 forest[0] 声明（仅它，或 forest[0] 和 var forest ）放置在 draw() 内，使其成为本地，则 draw 不起作用（x，y，大小不变） http： //jsfiddle.net /Nata_Hamster/8g697z02/ JS背后的逻辑是什么？

javascript

2 个回答

  1. Best Answer

    移入内部时，每次调用函数时都会初始化第一个元素的值draw。

    这意味着在循环结束时，这个元素的值会发生变化，但是下次调用该函数时，它们会被设置为初始值。

    因此，渲染只发生在一个点上。

    在渲染第一次赋值的情况下，它不会在每次 start 时重置draw，这意味着新的渲染发生在新的坐标处。

    • 3

  2. 1）你的图片每隔一段时间加载一次

    2）这件必须删除

    // forest.push({
//     y : cvs.height/2-tree_size+10,
//     x : cvs.width/2-width_path_near-tree_size/2,
//     size :  tree_size   
// });

    3）这是一个工作示例

    document.body.innerHTML = `<canvas id="canvas" width="500" height="300"></canvas>`;
var cvs = document.getElementById("canvas");
var ctx = cvs.getContext("2d");
var width_path_near = 80, width_path_far = 30;
// --
var tree1 = new Image();
tree1.src = getIMG();
var masTree = [tree1];
var randTree = 0;
// --
// var randTree=Math.floor(Math.random()*masTree.length); 
// 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 forest = [];
let base = () => ({
    x: cvs.width / 2 - width_path_near - tree_size / 2,
    y: cvs.height / 2 - tree_size + 10,
    size: tree_size,
});
forest[0] = base();
let max = 3 * cvs.height / 4
function draw() {
    ctx.fillStyle = "rgb(84,209,216)";
    ctx.fillRect(0, 0, 1000, 600);
    for (var i = 0; i < forest.length; i++) {
        // console.log(i)
        forest[i].y += 0.5;
        forest[i].x -= 0.4;
        forest[i].size += 0.4;
        if (forest[0].y >= max) {
            forest[1] = forest[0];
            forest[0] = base();
            // этот кусок обязательно убрать
            // forest.push({
            //     y : cvs.height/2-tree_size+10,
            //     x : cvs.width/2-width_path_near-tree_size/2,
            //     size :  tree_size   
            // });
        }
     		ctx.drawImage(masTree[randTree], forest[i].x, forest[i].y, forest[i].size, forest[i].size);

    }
    requestAnimationFrame(draw);
}
masTree[randTree].onload = draw;
function getIMG() {
    return `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAJcEhZcwAACxMAAAsTAQCanBgAAABaUExURTSTAC+FADCIAC6BADSUADSUADSUADSUADORADORACx9ADKNAC2AADWVAEG5ADWYAC2AADedAC6CAC6DAEG5ADWXAD6vAD+yADKOADeeAEG5ACt4AEC3AEC1AMQvmTgAAAAddFJOUwKDk/4oHd8QNFvCadg/cqej+k7w1XlJir3Eq/vvM3f8hwAAAwZJREFUSMftVduSozoMlB3b8v0G5mb4/988AmY2u7UzlcnzHlelMNAttdpCAfhHlsjmTUbtPb8BR8rRrbef9zq7L1CBhWcCr4F7tESpgu751wlZ7wQEQQnQd4u2gmeguz1f8S8prmc7CBwygum5VyeCR7S9V/QOBvan8MpYBdkdZGZ656cmz0mqJAvcwLWlq7ihQl5XUjp0K3kniLW5S2aBZ5CVJHnglnDWgDxN8P22QXRS0By91GAzeEdhWQ2+B3AXGaSo1kPo3j4+jsp0AlPZQUDOpA6qxEqZSS1HJm5vBkFunEo+DLaeIwhvWbBoBCPnvNWdIqLBK6bLPjAIj99cEKaipMDeSPLOovYoOjHrZa5lsFiE4J8MZMPgs/CLWCzg4B9GZCqNwg/6Mgj0QGbU6waDo7j2sZyK20MCF/URPPlFZWAe7mpRc0PuDf6ELY/HMDD2UMywillp8o5cWq62Uf4KC5KODbLnrHg8AycxpRCyWk6drpGYBTjt9XKdOAqTPT0V9OO3xam4q3EJ0zIL546RTchUCsLw7JVNd64pqfsckavl3OmlqFUVVe9mX1bOV7UsKTVTw9Wrzn2eCUg6QQhl0VeZ5eKvBGZTnRdFq5RBqZXrXwZTwAa4MjBXAlc0yDW1FiQvKpkgpNBTdc2IT4Ypa6BeTrRT6awkUSc7l5or63Xyf3+LRUnpZiNkA1H4+WTV0ZTUivvmI59LobKd1iRGzoUKlEnzQ8U1fDsXAqUIG7YoqMxC5chGYdr3jHu1FeYEMq7j2bvEGGf3YgS1Hcf0MYsA1nKkhi8o5FqZfpl+lINPrwadVMf25BMl4svhGLcnZj6OEt8bxXM5jvYWAynLbzJ/smLby7HjO4w5rsdbyuQ4bZEou/gxIx5huzjjDzlT3I55OuZ5J870o//GPY7HPs3HRlSy7TUpjMd0hpdx3+e4jbSdJ/k9PMZtH6d4MqjNaL8ZkjmO47pFZyYh/7ZdxDih2C/G5QPB50ng+eFP+ivGNURnQj2F4BTnOQr4f/2x/gNuPzAKx8eHUAAAAABJRU5ErkJggg==`;
}
//# sourceMappingURL=index.js.map

    四）requestAnimationFrame

    像每秒调用一次，每次调用函数时，坐标、大小和框架都会改变。在下面的示例中可以观察到 - 有绘图，没有运动。

    document.body.innerHTML = `<canvas id="canvas" width="500" height="300"></canvas>`;
var cvs = document.getElementById("canvas");
var ctx = cvs.getContext("2d");
var width_path_near = 80, width_path_far = 30;
// --
var tree1 = new Image();
tree1.src = getIMG();
var masTree = [tree1];
var randTree = 0;
  
var tree_size = 100;
var forest = [];
let base = () => ({
    x: cvs.width / 2 - width_path_near - tree_size / 2,
    y: cvs.height / 2 - tree_size + 10,
    size: tree_size,
});

function draw() {
    forest[0] = base();

    ctx.fillStyle = "rgb(84,209,216)";
    ctx.fillRect(0, 0, 1000, 600);
    for (var i = 0; i < forest.length; i++) {
        // console.log(i)
        ctx.drawImage(masTree[randTree], forest[i].x, forest[i].y, forest[i].size, forest[i].size);
        forest[i].y += 0.5;
        forest[i].x -= 0.4;
        forest[i].size += 0.4;
        if (forest[0].y == 3 * cvs.height / 4) {
            forest[1] = forest[0];
            forest[0] = base();
            // этот кусок обязательно убрать
            // forest.push({
            //     y : cvs.height/2-tree_size+10,
            //     x : cvs.width/2-width_path_near-tree_size/2,
            //     size :  tree_size   
            // });
        }
    }
    requestAnimationFrame(draw);
}
masTree[randTree].onload = draw;
function getIMG() {
    return `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAJcEhZcwAACxMAAAsTAQCanBgAAABaUExURTSTAC+FADCIAC6BADSUADSUADSUADSUADORADORACx9ADKNAC2AADWVAEG5ADWYAC2AADedAC6CAC6DAEG5ADWXAD6vAD+yADKOADeeAEG5ACt4AEC3AEC1AMQvmTgAAAAddFJOUwKDk/4oHd8QNFvCadg/cqej+k7w1XlJir3Eq/vvM3f8hwAAAwZJREFUSMftVduSozoMlB3b8v0G5mb4/988AmY2u7UzlcnzHlelMNAttdpCAfhHlsjmTUbtPb8BR8rRrbef9zq7L1CBhWcCr4F7tESpgu751wlZ7wQEQQnQd4u2gmeguz1f8S8prmc7CBwygum5VyeCR7S9V/QOBvan8MpYBdkdZGZ656cmz0mqJAvcwLWlq7ihQl5XUjp0K3kniLW5S2aBZ5CVJHnglnDWgDxN8P22QXRS0By91GAzeEdhWQ2+B3AXGaSo1kPo3j4+jsp0AlPZQUDOpA6qxEqZSS1HJm5vBkFunEo+DLaeIwhvWbBoBCPnvNWdIqLBK6bLPjAIj99cEKaipMDeSPLOovYoOjHrZa5lsFiE4J8MZMPgs/CLWCzg4B9GZCqNwg/6Mgj0QGbU6waDo7j2sZyK20MCF/URPPlFZWAe7mpRc0PuDf6ELY/HMDD2UMywillp8o5cWq62Uf4KC5KODbLnrHg8AycxpRCyWk6drpGYBTjt9XKdOAqTPT0V9OO3xam4q3EJ0zIL546RTchUCsLw7JVNd64pqfsckavl3OmlqFUVVe9mX1bOV7UsKTVTw9Wrzn2eCUg6QQhl0VeZ5eKvBGZTnRdFq5RBqZXrXwZTwAa4MjBXAlc0yDW1FiQvKpkgpNBTdc2IT4Ypa6BeTrRT6awkUSc7l5or63Xyf3+LRUnpZiNkA1H4+WTV0ZTUivvmI59LobKd1iRGzoUKlEnzQ8U1fDsXAqUIG7YoqMxC5chGYdr3jHu1FeYEMq7j2bvEGGf3YgS1Hcf0MYsA1nKkhi8o5FqZfpl+lINPrwadVMf25BMl4svhGLcnZj6OEt8bxXM5jvYWAynLbzJ/smLby7HjO4w5rsdbyuQ4bZEou/gxIx5huzjjDzlT3I55OuZ5J870o//GPY7HPs3HRlSy7TUpjMd0hpdx3+e4jbSdJ/k9PMZtH6d4MqjNaL8ZkjmO47pFZyYh/7ZdxDih2C/G5QPB50ng+eFP+ivGNURnQj2F4BTnOQr4f/2x/gNuPzAKx8eHUAAAAABJRU5ErkJggg==`;
}
//# sourceMappingURL=index.js.map

    5）将重复数据包装在一个函数中

    let base = () => ({
    x: cvs.width / 2 - width_path_near - tree_size / 2,
    y: cvs.height / 2 - tree_size + 10,
    size: tree_size,
});

    6）如果可能，取出计算值

    例如3 * cvs.height / 4，在函数外计数一次就足够了

    • 2

相关问题