javascript - context.drawImage() 不工作 - 没有错误信息

Question

我正在尝试为自己制作某种 API，而今天我正在使用 Promises 开发图像加载系统。我做了一些测试，由于某种原因，马里奥的图像没有显示在画布上。没有错误信息。我已经尝试调试了一段时间，但我无法让它工作:(

有没有人知道如何解决它？

当我尝试调试它时，我注意到一些奇怪的事情：当你尝试使用 grid.context.drawImage(mario, 0, 0); 绘制 mario 时 在例如 Loader.add 中显示，如果您在 Cellimage.draw 中执行相同的操作，则不会。我希望这有帮助 ：/

   function random(a, b, c) {
    c = c || 1;
    return Math.floor(Math.random()*Math.floor((b-a+1)/c))*c+a;
}

function loop(n, callback) {
    for (let i = 0; i < n; i++) {
        callback();
    }
}

function varNameToString(objVar) {
    return Object.keys(objVar)[0];
}

function createCanvas(container, width, height, id) {
    container = container || document.body;
    id = id || null;
    width = width || 0;
    height || height || 0;

    let canvas = document.createElement("canvas");
    if (id != null) { canvas.setAttribute("id", id); }
    canvas.width = width;
    canvas.height = height;

    return container.appendChild(canvas);
}

Array.prototype.random = function() {
    let randomElement = random(0, this.length - 1);
    return this.slice(randomElement, randomElement + 1);
}

class Loader {
    constructor(){
        this.loaderImages = [];
    }

    add(img, src, onLoad) {
        this.loaderImages.push({promise: new Promise(resolve => {
            img.onload = function(){
                //grid.context.drawImage(mario, 0,0);

                resolve(img);
            }
            img.src = src;
        }), onLoad: function(){
                onLoad();
            }
        });
    }

    load(img, onLoad) {
        this.loaderImages.img.promise.then(onLoad());
    }

    loadAll(onLoad) {
        Promise.all(this.loaderImages).then((imgs) => {
            console.log(imgs);
            onLoad(imgs);
        });
    }
}

class Vector2d {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }

    static add(vec1, vec2) {
        return new Vector(vec1.x + vec2.x, vec1.y + vec2.y);
    }

    static dotProduct(vec1, vec2) {
        return vec1.x * vec2.x + vec1.y * vec2.y;
    }

    static determinant(vec1, vec2) {
        return new Vector(vec1.x * vec2.y - vec1.y * vec2.x);
    }

    arg() {
        return Math.tan(this.y/this.x);
    }

    abs() {
        return Math.sqrt(this.x*this.x + this.y*this.y);
    }

    multiplyScalar(scalar) {
        return new Vector(this.x * scalar, this.y * scalar);
    }
}

class Grid {
    constructor(context, cellCountX, cellCountY, width, height, options) {
        this.options = options || {
            gridOffsetX: 0,
            gridOffsetY: 0
        }

        this.context = context;
        this.cellCountX = cellCountX;
        this.cellCountY = cellCountY;
        this.width = width;
        this.height = height;
        this.cells = [];

        this.griOffsetX = this.options.gridOffsetX;
        this.griOffsetY = this.options.gridOffsetY;

        for(let i = 0; i < cellCountX; i++) {
            this.cells[i] = [];
            for(let j = 0; j < cellCountY; j++) {
                this.cells[i][j] = {
                    context: context,
                    x: i,
                    y: j,
                    xcoord: i*width,
                    ycoord: j*height,
                    color: "white",
                    opacity: 0.0,
                    images: {},
                    text: "",
                    font: "",
                    border: {
                        thickness: 0,
                        color: "",
                        moveCellOrigin: false
                    },

                    fill: function(color, cellX, cellY, fillWidth, fillHeight) {
                        cellX = cellX + this.xcoord || this.xcoord;
                        cellY = cellY + this.ycoord || this.ycoord;
                        fillWidth = fillWidth || width;
                        fillHeight = fillHeight || height;

                        context.fillStyle = color;
                        context.fillRect(cellX, cellY, fillWidth, fillHeight);
                    },

                    addImage: function(image, name, width, height) {
                        this.images[name] = (new CellImage(this, image, this.x, this.y, width, height));
                    }
                }
            }
        }
    }

    loop(callback) {
        for(let i = 0; i < this.cellCountX; i++) {
            for(let j = 0; j < this.cellCountY; j++) {
                callback(i, j);
            }
        }
    }

    updateImgs() {
        loop((i, j) => {
            this.cells[i, j].drawImage(this.cells[i, j].img.image, this.cells[i, j].img.width, this.cells[i, j].img.height);
        });
    }

    updateAll() {
        updateImg();
    }
}

class CellImage {
    constructor(grid, image, x, y, width, height, options) {
        this.grid = grid;
        this.image = image;
        this.x = x;
        this.y = y;
        this.width = width || image.width;
        this.height = height || image.height;
        this.options = options || {
            offsetX: 0,
            offsetY: 0,
            sourceOffsetX: 0,
            sourceOffsetY: 0,
            sourceWidth: null,
            sourceHeight: null,
            rotationAngle: 0,
            centerOfRotation: "CENTER"
        }
    }

    draw() {
        this.options.sourceWidth = (this.options.sourceWidth === null) ? this.image.width : this.options.sourceWidth;
        this.options.sourceHeight = (this.options.sourceHeight === null) ? this.image.height : this.options.sourceHeight;

        if (this.options.rotationAngle % 360 !== 0) {
            if (this.options.centerOfRotation === "CENTER") {
                this.grid.context.save();
                this.grid.context.translate(this.grid.cells[this.x, this.y].xcoord + this.width / 2, this.grid.cells[this.x, this.y].ycoord + this.height / 2);
                this.grid.context.rotate(this.options.rotationAngle*Math.PI/180);
                this.grid.context.drawImage(this.image, this.options.sourceOffsetX,this.options.sourceOffsetY,this.options.sourceWidth,this.options.sourceHeight, -this.width/2, -this.height/2, this.width, this.height);
                this.grid.context.restore();
            } else {
                this.grid.context.save();
                this.grid.context.translate(this.options.centerOfRotation.x, this.options.centerOfRotation.y);
                this.grid.context.rotate(this.options.rotationAngle*Math.PI/180);
                this.grid.context.drawImage(this.image, this.options.sourceOffsetX,this.options.sourceOffsetY,this.options.sourceWidth,this.options.sourceHeight, -this.width/2, -this.height/2, this.width, this.height);
                this.grid.context.restore();
            }
        } else {
            this.grid.context.drawImage(this.image, this.options.sourceOffsetX, this.options.sourceOffsetY, this.options.sourceWidth, this.options.sourceHeight, this.xcoord + this.options.offsetX, this.ycoord + this.options.offsetY, this.width, this.height);
            this.grid.context.drawImage(this.image, 300, 300);
        }
    }
}
var canvas = createCanvas(document.body, 640, 640, "myCanvas");
const ctx = canvas.getContext("2d");

var grid = new Grid(ctx, 3, 3, 200, 200);

grid.loop((x, y) => {
    let color = ((x + y)%2 === 1) ? "grey" : "darkgrey";
   grid.cells[x][y].fill(color);
});

var mario = new Image(), luigi = new Image();
var loader = new Loader();
loader.add(mario, "mario.png", () => {
    grid.cells[1][2].addImage(mario, "mario", 200, 200);
    console.log(grid.cells[1][2].images);
    grid.cells[1][2].images.mario.draw();
});

loader.loadAll(imgs => {
    loader.loaderImages.forEach(loaderImage => {
        loaderImage.onLoad();
});});

标签： javascriptimagecanvas