无法使用fillrect方法绘制矩形

Posted 2021-04-12

我从'./paddle.js'具有以下代码导入Paddle；

let canvas = document.getElementById("gamescreen");
let context = canvas.getContext("2d");
context.clearRect(0, 0, 800, 600);

const GAME_WIDTH = 800;
const GAME_HEIGHT = 600;

let paddle = new Paddle(GAME_WIDTH, GAME_HEIGHT)
paddle.draw(context);

我的桨模块如下：

export default class Paddle{
    constructor(gamewidth, gameheight){
        this.width = 150;
        this.height = 30;
        this.position = {
            x: gamewidth/2 - this.width/2,
            y: gameheight - this.height - 10
        };
    }

    draw(ctx){
       ctx.fillStyle = "red";
       ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
    }
}

这里的问题是，当我调用paddle.draw并将contenxt作为参数传递时，什么都没有发生，所以在画布上没有绘制桨，请帮帮我。

答案

您需要在width元素上设置height和canvas属性。 CSS width和height样式属性确实会更改元素尺寸，但不会更改上下文尺寸。而是将上下文缩放以适合。设置元素的width和height属性会更改上下文尺寸和元素尺寸（尽管CSS可以覆盖元素尺寸）。

上下文尺寸通常默认为300x150。划桨正在此区域之外绘制。

解决此问题的一种方法是添加：

canvas.width = GAME_WIDTH;
canvas.height = GAME_HEIGHT;