HTML画布正在拉伸内容[重复]答案

【问题标题】：HTML canvas is stretching content [duplicate]HTML画布正在拉伸内容[重复]
【发布时间】：2015-10-16 09:40:09
【问题描述】：

我正在尝试从图块集中加载精灵，并将它们加载到 HTML5 画布中。

问题是坐标不等于图像的大小（它被拉伸了）

我所有的图片都是 64x64 像素。（1080p 分辨率预览：）如您所见，画布正在拉伸这些 64x64 图像。

所有代码： HTML：

<html>
<head>
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/board.css" />

    <script src="js/ext/jquery.js"></script>
    <script src="js/game.js"></script>
</head>
<body>
    <canvas id="GameBoard"></canvas>
</body>
</html>

CSS：

#GameBoard {
    width: 100vw;
    height: 100vh;
    border: 1px solid white;
}

JavaScript：

$(document).ready(function()
{
    createWorld();
}); 
function createWorld()
{
    var TileSets = loadTiles();
    drawWorld(TileSets);
}
var chunks = 
[
    [[0],[0],[0],[0],[0]],
    [[0],[1],[0],[1],[0]],
    [[0],[1],[0],[1],[0]],
    [[0],[1],[0],[1],[0]],
    [[0],[0],[0],[0],[0]]
];
var tiles = 
[
    { tileid: 0, tileset: 1, tilerow: 0, tilecolumn: 0},
    { tileid: 1, tileset: 1, tilerow: 0, tilecolumn: 1}
]
var tilesets =
[
    { tilesetid: 0, tilesrc: "static/tiles/tileset0.png", description:"OLD" },
    { tilesetid: 1, tilesrc: "static/tiles/tileset1.png", description:"New TEST" }
]

function loadTiles()
{
    var tiless = [];
    for(var i = 0; i < tilesets.length; i++)
    {
        var img = new Image();
        img.src = tilesets[i].tilesrc;
        tiless.push(img);
    }
    return tiless;
}

function drawWorld(TileSets)
{
    var WorldData = chunks;
    var canvas = document.getElementById("GameBoard");

    var counter = 0;

    for(var i = 0; i < WorldData.length; i++)
    {
        for(var j = 0; j < WorldData[i].length; j++)
        {
            counter++;

            var ctx = canvas.getContext("2d");
            var tileid = WorldData[i][j];
            var tilerow = tiles[tileid].tilerow;
            var tilecolumn = tiles[tileid].tilecolumn;

            console.log("DRAWN: " + counter + " FROM SET: " + tilerow + "x" + tilecolumn + " AT: " + i + "x" + j);

            ctx.drawImage(TileSets[1], 64 * tilecolumn , 64 * tilerow, 64, 64, 64 * j, 64 * i, 64, 64);
        }
    }
}

那么有什么方法，JavaScript、CSS 或其他方法可以使画布的网格大小为 64 x 64，以便图像以自己的比例放置在彼此相邻的位置。

【问题讨论】：

标签： javascript html html5-canvas

【解决方案1】：

<canvas id="GameBoard"></canvas>

您必须按像素值指定width 和height 属性。这些值是画布的虚拟大小。当你画一些东西时使用这个尺寸。

CSS

css 中的大小将画布缩放到指定大小，但不更改其虚拟大小。您正在看到这种缩放。

您必须通过仅指定一个维度来保持 css 中的比例。如果这不是解决方案，请提供有关您需要的虚拟大小的更多信息，我会尝试通过更具体的 css 提供帮助。

【讨论】：

【解决方案2】：

画布元素的属性/属性与画布元素样式有很大不同。前者代表画布上的实际像素数（您可以操作的实际像素等），而后者是画布的 DOM 表示。它对于拉伸和缩放很有用，但通常是我的错误，就像你的情况一样。

两种解决方案：

设置画布元素的高度和宽度以匹配元素的样式 (CSS)
使样式 (CSS) 的宽度和高度与实际画布的宽度和高度相同（在您的情况下为 64x64）

看看这里的区别：

var img = document.getElementById('img');
var c1 = document.getElementById('c1');
var c2 = document.getElementById('c2');
var c3 = document.getElementById('c3');

c1.width = 150;
c1.height = 150;

c2.width = 150;
c2.height = 150;

c3.width = 200;
c3.height = 150;

img.onload = function() {
  c1.getContext('2d').drawImage(img, 0, 0);
  c2.getContext('2d').drawImage(img, 0, 0);
  c3.getContext('2d').drawImage(img, 0, 0);
}

canvas {border: 1px solid #aaa; width: 150px; height: 150px}
#c2 {width: 200px}
img {visibility: hidden; position: absolute}

<img src="http://mario.nintendo.com/img/mario_logo.png" id="img" />
<canvas id="c1"></canvas>
<canvas id="c2"></canvas>
<canvas id="c3"></canvas>
<p>The first one is correct - CSS resolution matching the element resolution</p>
<p>The second one tries to resize by changing the element style (CSS) only</p>
<p>The third one tried to resize by changing the element width only</p>

【讨论】：

【解决方案3】：

问题是您在 vw 和 vh 中设置画布大小，并且在外部 css 文件中也是如此。要让canvas 正常工作，请尝试类似

<canvas id='Ganeboard' width='800px' height='400px'></canvas>

或使用内联样式，但我想canvas 的大小必须设置为固定，您必须使用代码自己处理调整大小

【讨论】：

1.没有px 的属性，只是一个数字。 2. 属性复制到样式（优先级低），但样式不影响虚拟大小。