gpt4 book ai didi

javascript - HTML Canvas 正在拉伸(stretch)内容

转载 作者:行者123 更新时间:2023-12-03 09:27:14 25 4
gpt4 key购买 nike

我正在尝试从图 block 集中加载 Sprite ,并将它们加载到 HTML5 Canvas 中。

问题是坐标不等于图像的大小(它被拉伸(stretch))

我的所有图像都是 64x64 像素。 (1080p 分辨率预览: img )如您所见, Canvas 正在拉伸(stretch)那些 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 或其他方法可以使 Canvas 网格的大小为 64 x 64,以便图像按照自己的比例并排放置。

最佳答案

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

您必须通过像素值指定宽度高度属性。这些值是 Canvas 的虚拟大小。当您绘制某些内容时会使用此尺寸。

CSS

css 中的尺寸将 Canvas 缩放至指定尺寸,但不改变其虚拟尺寸。您会看到这种缩放。

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

关于javascript - HTML Canvas 正在拉伸(stretch)内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31632157/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com