图像未显示在画布上

时间:2019-12-16 15:54:57

标签: javascript html canvas

我正在为网站创建javascript应用,我需要在画布上显示网格和2张图像。除了我打开控制台外,其他所有东西都在工作。打开控制台时,显示了从简单的线条创建的网格,但没有显示图像,因此我无法调试它。有人知道如何解决这个问题吗?


this.interval = setInterval(() => {
    this.draw();
}, 10);

draw() {
    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);

    this.ctx.fillStyle = 'white';
    this.ctx.fillRect(0, 0, this.sizeX, this.sizeY);
    this.ctx.drawImage(this.getOverlay(), 0, 0, this.sizeX, this.sizeY);

    const countX = Math.floor(this.sizeX / this.gridSize);
    const countY = Math.floor(this.sizeY / this.gridSize);

    this.ctx.fillStyle = 'rgba(218, 218, 218, .5)';
    for (let i = 0; i < countX; i++) {
        this.ctx.fillRect(this.gridSize * (i + 1), 0, 1, this.sizeY);
    }
    for (let i = 0; i < countY; i++) {
        this.ctx.fillRect(0, this.gridSize * (i + 1), this.sizeX, 1);
    }

    this.draggable();
}

draggable() {
  this.ctx.globalAlpha = this.opacity;
  this.ctx.drawImage(
    this.getImage(),
    this.draggablePositionX,
    this.draggablePositionY,
    this.draggableSizeX,
    this.draggableSizeY
  );
  this.ctx.globalAlpha = 1;
}

0 个答案:

没有答案