我在 64x64 画布上绘制 16x16 像素正方形，并使用 CSS 来缩放它们。然而，正方形的右角未对齐。谁能帮我弄清楚为什么会发生这种情况以及如何解决它？
我使用带有“图像渲染：像素化”和“图像渲染：锐边”的 CSS。在 Windows 上的 Google Chrome 浏览器中
const canvas = document.getElementById('myCanvas')
const ctx = canvas.getContext('2d')
ctx.fillStyle = "rgba(0, 0, 0, 0.7)"
ctx.fillRect(0, 0, canvas.width, canvas.height)
function drawSquare(positionY, positionX) {
ctx.fillStyle = "green";
ctx.fillRect(positionX * 16, positionY * 16, 16, 16);
}
drawSquare(1, 1)
drawSquare(2, 1) body {
margin: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #f0f0f0;
}
canvas {
width: 100vmin;
height: 100vmin;
max-width: 100%;
max-height: 100%;
image-rendering: pixelated;
image-rendering: crisp-edges;
}<body>
<canvas id="myCanvas" width="64" height="64"></canvas>
</body>尝试使用
transform: scale( <integer here> )transform-origin: top left;宽度和高度有时会导致分数缩放并导致像素未对齐。而变换将使用整数缩放来保留对齐和锐边 所以尝试这样的事情
canvas {
transform: scale(10);
transform-origin: top left;
image-rendering: pixelated;
image-rendering: crisp-edges;
}