Question

我放在画布上的形状总是以某种方式扭曲。我不确定它是我的画布尺寸还是只是错误的代码。（虽然如果它是错误的代码，可能会在现在修复它）。这是我的代码：

<script type = "text/javascript">
var game = document.getElementById("game");
//To keep the shapes from coming out with low resolution/a fuzzy look
game.height = 1000;
game.width = 1000;
var context = game.getContext("2d");
var gamePieces = []
function gamePiece(width, height, color, x, y){
    this.width = width;
    this.height = height;
    this.x = x;
    this.y = y;
    this.update = function(){
        context.fillStyle = color;
        context.fillRect(this.x, this.y, this.height, this.width);
    }
    this.move = function(distancex, distancey, leftOrRight, upOrDown){
        if(leftOrRight.toLowerCase() == "left"){
            this.x = this.x - distancex
        } else if(leftOrRight.toLowerCase() == "right"){
            this.x = this.x + distancex;
        }
        if(upOrDown.toLowerCase() == "up"){
            this.y = this.y - distancey;
        } else if(upOrDown.toLowerCase() == "down"){
            this.y = this.y + distancey
        }
    }
    gamePieces[gamePieces.length] = this
    context.fillStyle = color;
    context.fillRect(this.x, this.y, this.height, this.width);
}
function update(){
    context.clearRect(0, 0, game.width, game.height);
    for(var i = 0; i < gamePieces.length; i++){
        gamePieces[i].update();
    }
}
setInterval(update, 1);
var p1 = new gamePiece(100, 100, "blue", 0, 0);

</script>

这是画布的CSS：

#game {
    height: 100%;
    width: 100%;
}

我尝试过更改某些尺寸，但仍然是这样。我正在测试的浏览器是Chrome。

Answer 1

您将画布的宽度和高度设置为1000px，然后将css宽度和高度设置为100％。

画布仍然是1000 * 1000像素，但CSS会缩放内容以匹配窗口的宽高比。

想象一下画布作为图像。如果您调整图像大小，则会失真。

只需删除CSS样式。

Canvas fillRect的高度和宽度始终是倾斜/扭曲的

1 个答案: