HTML画布正在拉伸内容[重复]
Posted
技术标签:
【中文标题】HTML画布正在拉伸内容[重复]【英文标题】：HTML canvas is stretching content [duplicate] 【发布时间】：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;
$(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，以便图像以自己的比例放置在彼此相邻的位置。
【问题讨论】：
【参考方案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. 属性复制到样式（优先级低），但样式不影响虚拟大小。以上是关于HTML画布正在拉伸内容[重复]的主要内容，如果未能解决你的问题，请参考以下文章