javascript - Canvas 中的宽度和高度不准确

Question

我正在尝试绘制宽度为 x*100px 和高度为 y*100px 的 Canvas

var x=6,y=5;
var canvas = document.getElementById('game');
var ctx = canvas.getContext('2d');
canvas.style.width=(100*x)+"px";
canvas.style.height=(100*y)+"px";

for(var i=0;i<x;i++)
    for(var j=0;j<y;j++)
    {
        ctx.fillStyle = "rgb(200,0,0)";
        ctx.fillRect (i*100, j*100, 100, 100);
        ctx.fillStyle = "rgb(0,0,0)";
        ctx.strokeRect(i*100, j*100, 100, 100);
    }

jsfiddle
但看起来网格中每个图 block 的宽度和高度都不是 100 px，这是为什么呢？以及如何将每个图 block 的宽度精确设置为 100px？

Answer 1

改用这个:

canvas.width=(100*x);
canvas.height=(100*y);

这似乎有点奇怪，但是 canvas 是一种不为其宽度和高度使用 CSS 样式的元素类型。可用物理像素的数量与其绘制方式密切相关，因此不能将其保留为 transient 的派生 CSS 值(即 width: calc(300vw - 100% - 20px);)。也就是说，如果您要使网页响应，在浏览器调整大小时更改宽度/高度通常是个好主意。