canvas 中的图像大小、比例错误并且变得模糊

Question

我的想法是将图像添加到 canvas 大小并调整大小。然而，不知何故，canvas 的比率比外部 (HTML) 大。我想它可能会大三倍。不仅如此，即使我添加了 this.context.imageSmoothingEnabled = false;.

这行，它也变得模糊了

控制台也没有警告我任何事情所以我真的不知道我做错了什么。我按照W3Schools about making game and drawImage().

的教训

如果你们能告诉我我做错了什么以及如何解决它，那就太好了。提前致谢。

这是 Chrome 上的问题图片：

这是 MS Edge 上的问题图片：

这是我的 JS 代码：

function startGame() {
    player = new character(document.querySelector('#eila'), 0, 0);
    playground.start();
}

var playground = {
    canvas  : document.createElement('canvas'),
    start   : function() {
        this.canvas.id = 'playground';
        this.context = this.canvas.getContext('2d');
        this.context.imageSmoothingEnabled = false;
        document.querySelector('#game').appendChild(this.canvas);

        setInterval(updatePlayground, 10)
    },
    clear   : function() {
        this.context.clearRect(0,0, this.canvas.width, this.canvas.height)
    }
}

function character(img, posX, posY) {
    this.width  = 45;
    this.height = 60;
    this.img    = img;
    this.x      = posX;
    this.y      = posY;
    this.update = function() {
        ctx = playground.context;
        ctx.drawImage(this.img, this.x, this.y, this.width, this.height)
    }
}

function updatePlayground() {
    playground.clear();
    player.update();
}

这是我的 HTML 代码：（我正在使用 CSS 调整大小 canvas）

<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'>
    <title>Né đồ rơi</title>
    <style>
        body {
            margin: 0;
            font-family: 'Roboto', 'Open Sans'
        }

        header, #game {
            margin: auto;
            width: 55em
        }

        #game {
            background: #FAFAFA;
            border: 1px solid #EBEBEB;
            border-radius: 2px;
            padding: 1em;
        }

        #playground {
            height: 500px;
            width: 100%
        }
    </style>

    <script src='game.js'></script>
</head>
<body onload='startGame();'>
    <header>
        <p>Không được để các món đồ rơi xuống bạn!</p>
    </header>   
    <section id='game'>
        <p style='text-align:center; margin-top:0'>Đã né được <span id='items'>0</span> món đồ.</p>
        <!--<canvas id='playground'></canvas>-->
    </section>
    <section style='display:none'>
        <img id='eila' src='eila.png' height='60'/>
    </section>
</body>
</html>

我使用的是 PNG 图片，所以它可以有透明背景。

Answer 1

创建 canvas 元素时，其默认大小为 150 CSS 像素 x 300 CSS 像素。如果使用 CSS 规则调整 canvas 元素的大小，则 "internal" 大小将保持为 150*300，除非您更改属性 canvas.height 和 canvas.width。在你的代码中是什么意思？

你的canvas被拉长了，宽度变成了window的100%，"external height"是500，而"internal"的尺寸还是150x300，所以你画的任何东西都会以同样的方式拉伸。

您可以查看以下相关问答：

canvas 中的图像大小、比例错误并且变得模糊

Image in canvas got wrong size, ratio and got blur

html

javascript

canvas

drawimage