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

【问题标题】：width and height in canvas are not accurate画布中的宽度和高度不准确
【发布时间】：2015-08-04 13:12:06
【问题描述】：

我正在尝试绘制宽度为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？

【问题讨论】：

标签： javascript canvas

【解决方案1】：

改用这个：

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

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

【讨论】：