为什么这些转换后的画布在某些分辨率下无法在 chrome 中完整呈现？

Question

fiddle: https://jsfiddle.net/f8hscrd0/66/

html:

<body>
<div id="canvas_div">
</div>
</body>

js:

let colors = [
    ['#000','#00F','#0F0'],
    ['#0FF','#F00','#F0F'],
    ['#FF0','#FFF','#000']
]

let canvas_div = document.getElementById('canvas_div');
canvas_div.style.position = "fixed";
canvas_div.style.top = "50%";
canvas_div.style.left = "50%";
canvas_div.style.width = "0";
canvas_div.style.height = "0%";
canvas_div.style.transform = "scale(10) translate(-20px,-20px)";

for (i = 0; i < 3; i++){
    for (j = 0; j < 3; j++){
    let canvas = document.createElement('canvas');
    canvas.width = 100;
    canvas.height = 100;
    canvas.style.position = "fixed";
    canvas.style.top = `${i * 10}px`;
    canvas.style.left = `${j * 10}px`;
    canvas.style.width = "10px"
    canvas.style.height = "10px"
    let context = canvas.getContext("2d");
    context.fillStyle = colors[i][j];
    context.fillRect(-0,0,100,100);
        canvas_div.appendChild(canvas);
    }
}

为什么 canvases 不渲染 chrome 中的整个相应 canvas 元素？

我不知道怎么说才好。它在 firefox 中工作正常（如我所料），并且当视口是奇数像素（在两个轴上）时它工作。如果您没有发现问题，请调整 fiddle 或 window 的大小（或打开开发工具或其他东西）。

我希望看到的（以及我在 FF 或奇数 window 中看到的）：

我看到的宽度均匀的文档：

如您所见，在检查时，canvas 元素本身似乎是正确的大小：

这是 chrome 中的错误，还是我 missing/misunderstanding 什么东西？

Answer 1

首先，在你提供的fiddle中有一些错误（应该是appendChild而不是appendChile，你需要运行 canvas.getContext('2d')来绘制到屏幕等）。至于实际问题，我相信您看到的是 Chrome 的 margin/padding。它是大多数网络浏览器赋予 DOM 元素的白色边框。您可以通过将其添加到链接的 css 文件来删除它。

div, canvas {
  margin: 0px;
  padding: 0px;
}

您可以在此处获取更多信息：CSS Box Model

因此，经过更多研究，问题似乎出在用于 canvas div 的比例尺 (10) 上。我找不到该问题的现有解决方案，但我建议只删除它并使 javascript 将 canvases 放在预期位置。

...

canvas_div.style.transform = "translate(-20px,-20px)"; // Removed scaling

...

for (i = 0; i < 3; i++){
    for (j = 0; j < 3; j++){
    let canvas = document.createElement('canvas');
    canvas.width = 100;
    canvas.height = 100;
    canvas.style.position = "fixed";
    canvas.style.top = `${i * 100}px`;
    canvas.style.left = `${j * 100}px`;
    canvas.style.width = "100px"
    canvas.style.height = "100px"

...

}

为什么这些转换后的画布在某些分辨率下无法在 chrome 中完整呈现？

Why are these transformed canvases not rendering in entirety in chrome at certain resolutions?

javascript

css

google-chrome

html5-canvas