HTML5 Canvas y 高度不正确

Question

所以我只是想制作一个简单的动画 HMTL canvas，其中包含一个使用 WASD 在 canvas 周围移动的动画块。我最初注意到在 canvas 上绘制一个大小为 5,5 的矩形看起来像一个大小为 5,10 的矩形。在测试我的重绘功能并将 canvas 中元素的 x 和 y 位置打印到控制台时，我注意到我的矩形可以在 X 方向上从 1-300 移动，但在 Y 方向上只能从 1-150 移动方向。即使 canvas 的样式设置为 300,300，也会发生这种情况。谁能看出我是不是做了什么蠢事？

    <!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="script.js" defer></script>
</head>
<body>
    <div class="text-holder holder" id="instruction-holder">
        <p class="text" id="instruction">Use WASD to navigate around the viewer</p>
    </div>
    <div class="holder" id="canvas-holder">
        <canvas id="canvas"></canvas>
    </div>
</body>
</html>

和css

    #canvas {
    width: 300px;
    height:300px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    border-style: solid;
    border-color: grey;
    border-radius: 1px;
}

.holder {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

和 js

var UP = "87", DOWN = "83", LEFT = "65", RIGHT = "68", X = 10, Y = 5, XSIZE = 10, YSIZE = 5;
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
var xPos, yPos;

window.addEventListener("load",init);
document.addEventListener('keydown',move);

function init() {
    xPos = 1;
    yPos = 1;
    ctx.fillStyle = "black";
    ctx.fillRect(xPos,yPos,XSIZE,YSIZE);
}

function clear() {
    ctx.clearRect(0,0,300,300);
}

function reDraw(delX, delY) {
    console.log(yPos+delY + " " + (xPos+delX));
    if (xPos+delX > 0 && xPos+delX < 300 && 
        yPos+delY > 0 && yPos+delY < 150) {
        clear();
        ctx.fillStyle = "black";
        xPos = xPos+delX;
        yPos = yPos+delY;
        ctx.fillRect(xPos,yPos,XSIZE,YSIZE);
    }
}

function move(ev) {
    var delX, delY;
    var key = ev.keyCode;
    if (key == UP) {
        delX = 0;
        delY = -Y;
    } else if (key == DOWN) {
        delX = 0;
        delY = Y;
    } else if (key == LEFT) {
        delX = -X;
        delY = 0;       
    } else if (key == RIGHT) {
        delX = X;
        delY = 0;
    }

    if (delX != undefined && delY != undefined) {
        reDraw(delX, delY);
    }
}

Answer 1

您必须明确设置 canvas 的大小，否则它将使用默认大小 300x150（CSS 仅缩放元素，而不缩放位图 - 300x150 的位图被拉伸以适合你在屏幕上看到的 CSS 规则，但位图将在内部保持相同的大小）：

<canvas id="canvas" width=300 height=300></canvas>

然后只需删除这些：

#canvas {
  /* width: 300px; */
  /* height:300px; */
  ...

HTML5 Canvas y 高度不正确

HTML5 Canvas y-height not correct

html

javascript

css

animation

canvas