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

问题描述

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

首先我写的没有随机性

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/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,img.width,img.height,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,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/4/47/PNG_transparency_demonstration_1.png"
            ],}
},

enter code here

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

现在我总是收到消息：无法在字符串上创建属性“onload”

我该如何解决？我不明白。泰（这是我的第一篇文章，请不要客气）

解决方法

这是因为 array.map 不会更改原始数组，而是返回原始数组的更改版本，

所以你应该将原始数组设置为新数组

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,img.width,img.height,i*100,100,100);
        }
        });
    },

canvas javascript