Question

我是画布上的新人，我试图让游戏全屏，更重要的是对小屏幕的响应但是我的形状模糊不清，就像它们被放大了一样这是我的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

那是因为它已被拉长了。

记住画布基本上有两种尺寸是很重要的。一个尺寸是＆＃39;图像中的像素数量。画布是。另一个是你用上面的CSS设置的那个，是浏览器渲染画布的尺寸＆＃39;图像＆＃39;至。（画布，在很多方面，只是一个由javascript动态绘制而不是静态存储在文件中的图片）。

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

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

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

然后使用这些值来设置画布＆＃39;大小如this question。

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

或者，你可以设置画布＆＃39;宽度和高度对于大屏幕来说是一个可接受的高水平，然后允许它被压缩到较小的屏幕。 Squished图像看起来比拉伸图像更好。

Canvas Fullscreen 100％会导致模糊

1 个答案: