画布全屏 100% 导致模糊

Question

我是 canvas 的新手，我正在尝试制作全屏游戏，更重要的是响应小屏幕 但是我的形状变得模糊，就像它们被放大了一样 这是我的 CSS 和两个 JavaScript 函数

 canvas {
    background: green;
    width: 100%;
    height: 100%;
}

//this function draws
    function drawEverything() {
        colorRect(0, 0, canvas.width, canvas.height, '#C9EEF3', "Main");
        colorRect(50,0,150, 35, "red","firstRow");

}

 // this function gives the layout of the rectangels
    function colorRect(leftX, topY, width, height, drawColor, tag) {
        canvasContext.fillStyle = drawColor;
        canvasContext.fillRect(leftX, topY, width, height);
    }

Answer 1

那是因为它被拉长了。

请务必记住，画布基本上有两种尺寸。一种尺寸是画布所在的“图像”中的像素数。另一个，你用上面的 CSS 设置的，是浏览器将画布“图像”渲染到的大小。 （在许多方面，画布只是由 javascript 动态绘制的图片，而不是静态存储在文件中的图片）。

所以基本上你所做的是拍摄一张 300x150 的图片并告诉浏览器将其拉伸到数千像素。那看起来不会很好。

如果您真的想要一个与用户屏幕完全匹配的 100% 动态画布，您将需要获取其窗口的宽度和高度：

var w = window.innerWidth;
var h = window.innerHeight;

然后使用这些值设置画布的大小，如this question。

您还需要在绘图计算中使用高度和宽度，以确保您将对象放置在屏幕的正确部分，尺寸正确。

或者，您可以将画布的宽度和高度设置为大屏幕可接受的高水平，然后让它在较小的屏幕上被压扁。压扁的图像比拉伸的图像看起来更好。