无法使用fillrect方法绘制矩形

时间:2019-12-17 19:25:40

标签: javascript html canvas

我有以下代码从'./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作为参数传递时,什么都没有发生,所以画布上没有绘制桨,请帮帮我。

1 个答案:

答案 0 :(得分:0)

您需要在width元素上设置heightcanvas属性。 CSS widthheight样式属性的确会更改元素尺寸,但不会更改上下文尺寸。而是将上下文缩放以适合。设置元素的widthheight属性可以更改上下文尺寸和元素尺寸(尽管CSS可以覆盖元素尺寸)。

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

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

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