Question

我正在尝试从图块集加载精灵，然后将它们加载到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×64，这样图像就可以放在彼此相邻的各个尺度上。

Answer 1

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

您必须按像素值指定width和height 属性。这些值是画布的虚拟大小。绘制内容时会使用此大小。

CSS

css中的大小将画布缩放到指定大小，但不更改其虚拟大小。你看到了这种扩展。

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

Answer 2

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

两种解决方案：

设置canvas元素的高度和宽度以匹配元素的样式（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>

Answer 3

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

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

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

HTML画布正在扩展内容

3 个答案: