如何解决无法在字符串上创建属性“onload”
首先我写的没有随机性
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);
}
});
},
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。