6

我正在尝试绘制一个 38 像素宽和 38 像素长的矩形。

<div id="dpi1" style="height: 38px ; width: 38px;background-color: red"></div>

这按预期工作。但是，当我尝试使用此代码在画布上绘制矩形时

var cxt=canvas.getContext("2d");
     cxt.beginPath();
     cxt.rect(0, 0, 38, 38);
     cxt.fillStyle = 'yellow';
     cxt.fill();

     cxt.stroke();

我得到一个较小的矩形。为什么会这样？这是否意味着画布（x，y 坐标）中的网格小于 1 像素？

4

1 回答 1

9

你有没有canvas明确设置你的宽度和高度？如果没有，您可能会在浏览器上获得奇怪的默认缩放设置。IE：

<canvas width="640" height="480"></canvas>

此外，为了确保您获得的是逐像素画布，请仅将widthand设置height为属性，而不是在 CSS 中。这可能会导致您的画布在一个系统中绘制，但在另一个系统中显示。即，以下将使画布显示为其一半大小：

<canvas width="640" height="480" style="width: 320px; height: 240px"></canvas>

相关：使用 CSS 时画布被拉伸，但“宽度”/“高度”属性正常

于 2013-03-23T05:10:33.230 回答