无法在字符串上创建属性 'onload'

Question

我想编写用一堆随机选择的图像填充画布的代码。

首先我写的没有随机性

enter code here

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

        var images = [
            "https://i.imgur.com/zyXQMZ8.jpg",
            "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/330px-Image_created_with_a_mobile_phone.png",
            "https://upload.wikimedia.org/wikipedia/de/b/bb/Png-logo.png",
            "https://i.imgur.com/ZKMnXce.png",
            "https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png",
            "https://i.imgur.com/zyXQMZ8.jpg",
            "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/330px-Image_created_with_a_mobile_phone.png",
            "https://upload.wikimedia.org/wikipedia/de/b/bb/Png-logo.png",
            "https://i.imgur.com/ZKMnXce.png",
            "https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png"
        ].map(function(i){
            var img = document.createElement("img");
            img.src = i;
            return img;
        });

        Promise.all(images.map(function(image) {
            return new Promise(function(resolve) {
                image.onload = resolve;
            });
        }))
        .then(function() {
        for (var i = 0; i < 10; i++) {
            var img = images[i];
            ctx.drawImage(img,0,0,img.width,img.height,0,i*100,100,100);
        }
        });
    }

这成功了。现在随机：

enter code here

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

        var randomImageArray = [];
        for(var i=0; i<10; i++){
            for(var j=0; j<10; j++){
                randomImageArray.push(this.imageArray[this.rng(5)]);
            }
        }

        randomImageArray.map(function(i){
                var img = document.createElement("img");
                img.src = i;
                return img;
        });

        Promise.all(randomImageArray.map(function(image) {
            return new Promise(function(resolve) {
                image.onload = resolve;
            });
        }))
        .then(function() {
        for (var i = 0; i < 10; i++) {
        var img = randomImageArray[i];
        ctx.drawImage(img,0,0,img.width,img.height,0,i*100,100,100);
        }
        });
    },

enter code here

data() {
    return{
        array: [],
        canvis: "",
        checked: false,
        number1: "",
        number2: "",
        numImgs: "",
        imageArray: [
            "https://i.imgur.com/zyXQMZ8.jpg",
            "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/330px-Image_created_with_a_mobile_phone.png",
            "https://upload.wikimedia.org/wikipedia/de/b/bb/Png-logo.png",
            "https://i.imgur.com/ZKMnXce.png",
            "https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png"
            ],
    }
},

enter code here

rng(reach){
        return Math.floor(Math.random() * reach);
    },

现在我总是收到消息：无法在字符串

上创建属性 'onload'

我该如何解决？我不明白。泰（这是我的第一个post请多多关照）

Answer 1

这是因为 array.map 没有更改原始数组，但 returns 更改了原始数组的版本，

所以你应该把原来的数组改成新的

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

        var randomImageArray = [];
        for(var i=0; i<10; i++){
            for(var j=0; j<10; j++){
                randomImageArray.push(this.imageArray[this.rng(5)]);
            }
        }

        randomImageArray = /*<---- here*/randomImageArray.map(function(i){
                var img = document.createElement("img");
                img.src = i;
                return img;
        });

        Promise.all(randomImageArray.map(function(image) {
            return new Promise(function(resolve) {
                image.onload = resolve;
            });
        }))
        .then(function() {
        for (var i = 0; i < 10; i++) {
        var img = randomImageArray[i];
        ctx.drawImage(img,0,0,img.width,img.height,0,i*100,100,100);
        }
        });
    },

无法在字符串上创建属性 'onload'

Cannot create property 'onload' on string

javascript

canvas

onload

无法在字符串上创建 属性 'onload'

Cannot create property 'onload' on string

javascript

canvas

onload

无法在字符串上创建属性 'onload'