我的矩形位置错误 - javascript

Question

我必须编写一个骰子游戏，但我的骰子有问题。

所以，这是我的代码：

export class Dice {

    constructor() {
        this.canvas_dice = document.getElementById("dice-canvas");
    }

    drawDice(value) {
        let ctx = this.canvas_dice.getContext('2d');
        let canvas_size = this.canvas_dice.width;
        let dot_size = canvas_size / 3;
        let matrice = {
            1: [[1, 1]],
            2: [[0, 0], [2, 2]],
            3: [[0, 0], [1, 1], [2, 2]],
            4: [[0, 0], [2, 0], [0, 2], [2, 2]],
            5: [[0, 0], [2, 0], [0, 2], [2, 2], [1, 1]],
            6: [[0, 0], [0, 1], [0, 2], [2, 0], [2, 1], [2, 2]]
        }

        matrice[value].forEach(dot => {
            console.log(dot);
            let x = dot[0] * dot_size;
            let y = dot[1] * dot_size;

            console.log(x + " " + y);

            ctx.fillStyle = 'rgb(255, 0, 0)';
            ctx.fillRect(x, y, dot_size, dot_size);
        });
    }
}

例如，当我这样调用函数时

let dice = new Dice();
dice.drawDice(2);

我的控制台中有 that on my browser and that。

我不明白为什么我的点位置不对。

我的 drawDice 函数中的所有其他值都存在同样的问题。

你能看出我的错误吗？我该如何改正？

提前致谢

Answer 1

canvas 元素的高度存在问题。你的点被切断了。

默认情况下，canvas 元素的高度设置为 150 像素。宽度设置为 300px。只需将 canvas 元素设为正方形即可创建您的骰子面。 HTMLCanvasElement.height

在 drawDice 函数中添加以下行似乎可以解决此问题。

        this.canvas_dice.height = canvas_size;

我的矩形位置错误 - javascript

Wrong position of my rectangle - javascript

javascript

2d

canvas