Question

我的想法是将图像添加到画布大小并调整大小。但是，不知何故，canvas的比例大于外部（HTML）。我想它可能会增加三倍。不仅如此，即使我添加了行this.context.imageSmoothingEnabled = false;，它也变得模糊。

控制台也没有警告我什么，所以我真的不知道我错了什么。我按照W3Schools about making game和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调整画布大小）

<!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像素乘以300 CSS像素。如果使用CSS规则调整canvas元素的大小，那么＆＃34; internal＆＃34;除非您更改属性canvas.height和canvas.width，否则尺寸将保持为150 * 300。你的代码意味着什么？

你的画布已被拉伸，宽度变为窗口的100％和外部高度＆＃34;是500，而＃34;内部＆＃34;尺寸仍然是150x300，所以你画的任何东西都会以同样的方式拉伸。

您可以查看这些相关的Q＆amp; A：https://stackoverflow.com/a/4939066/1919228

画布中的图像大小，比例错误并且变得模糊

1 个答案: