在 Javascript canvas 中加载 drawImage() 方法时出错
Error in loading drawImage() method in Javascript canvas
我的代码中有以下 class:
//Collectables
const humanImg = new Image();
humanImg.src = "../images/human.png";
const mutationImg = new Image();
mutationImg.src = "../images/mutation.png";
//Canvas
const mycanvas = document.getElementById('my-canvas');
let ctx = mycanvas.getContext('2d');
//Classes
class Collectable {
constructor(img, x, y, width, height) {
this.img = img;
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.collected = false;
this.notScored = true;
this.mutate = false;
};
draw(){
ctx.drawImage(this.img, this.x, this.y, this.width, this.height);
};
checkcollision(object) {
return (
this.x < object.x + object.width &&
this.x + this.width > object.x &&
this.y < object.y + object.height &&
this.y + this.height > object.y
);
};
collect(object){
if (this.checkcollision(object)) {
this.collected = true;
ctx.clearRect(this.x, this.y, this.width, this.height);
ctx.fillStyle = "black";
ctx.fillRect(this.x, this.y, this.width, this.height);
this.mutate = true;
};
};
updateScore(object, score){
if ((this.checkcollision(object)) && (this.notScored === true)){
points += score;
pointsRestart += score;
this.notScored = false;
playerMovingAudio.play();
playerMovingAudio.volume = 0.6;
};
};
};
稍后我调用 class 收藏品时的代码:
// Collectables
const specialCollects = [
new Collectable(mutationImg, 20, 60, 30, 30),
new Collectable(mutationImg, 950, 60, 30, 30),
new Collectable(mutationImg, 20, 500, 30, 30),
new Collectable(mutationImg, 950, 500, 30, 30)
];
我得到一个错误:
Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The HTMLImageElement provided is in the 'broken' state.
而且我不知道如何解决,错误在这一行:
ctx.drawImage(this.img, this.x, this.y, this.width, this.height);
在 class 收藏品中。我试图在该行添加和加载事件,但错误仍然存在。我能做什么?
谢谢!
终于把js文件改到根目录下解决了这个问题。我认为查找图像需要时间,因为它必须在两个文件夹之间查找,我之前将 js 文件放在一个名为 \js 的文件夹中。非常感谢!
我的代码中有以下 class:
//Collectables
const humanImg = new Image();
humanImg.src = "../images/human.png";
const mutationImg = new Image();
mutationImg.src = "../images/mutation.png";
//Canvas
const mycanvas = document.getElementById('my-canvas');
let ctx = mycanvas.getContext('2d');
//Classes
class Collectable {
constructor(img, x, y, width, height) {
this.img = img;
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.collected = false;
this.notScored = true;
this.mutate = false;
};
draw(){
ctx.drawImage(this.img, this.x, this.y, this.width, this.height);
};
checkcollision(object) {
return (
this.x < object.x + object.width &&
this.x + this.width > object.x &&
this.y < object.y + object.height &&
this.y + this.height > object.y
);
};
collect(object){
if (this.checkcollision(object)) {
this.collected = true;
ctx.clearRect(this.x, this.y, this.width, this.height);
ctx.fillStyle = "black";
ctx.fillRect(this.x, this.y, this.width, this.height);
this.mutate = true;
};
};
updateScore(object, score){
if ((this.checkcollision(object)) && (this.notScored === true)){
points += score;
pointsRestart += score;
this.notScored = false;
playerMovingAudio.play();
playerMovingAudio.volume = 0.6;
};
};
};
稍后我调用 class 收藏品时的代码:
// Collectables
const specialCollects = [
new Collectable(mutationImg, 20, 60, 30, 30),
new Collectable(mutationImg, 950, 60, 30, 30),
new Collectable(mutationImg, 20, 500, 30, 30),
new Collectable(mutationImg, 950, 500, 30, 30)
];
我得到一个错误:
Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The HTMLImageElement provided is in the 'broken' state.
而且我不知道如何解决,错误在这一行:
ctx.drawImage(this.img, this.x, this.y, this.width, this.height);
在 class 收藏品中。我试图在该行添加和加载事件,但错误仍然存在。我能做什么?
谢谢!
终于把js文件改到根目录下解决了这个问题。我认为查找图像需要时间,因为它必须在两个文件夹之间查找,我之前将 js 文件放在一个名为 \js 的文件夹中。非常感谢!