Question

我试图绘制宽度为x*100px且高度为y*100px的画布

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
但看起来网格中每个图块的宽度和高度都不是100 px，为什么呢？以及如何将每个图块的宽度精确设置为100px？

Answer 1

请改用：

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

看起来有点奇怪，但canvas是一种元素类型，不使用CSS样式的宽度和高度。可用物理像素的数量与其绘制方式非常相关，因此不能将其保留为瞬态派生CSS值（即width: calc(300vw - 100% - 20px);）。也就是说，如果您要使网页响应，通常最好在浏览器上调整宽度/高度。

画布中的宽度和高度不准确

1 个答案: