html - 为什么 38px x 38px 比 Canvas 矩形 38 x 38 大，尽管尺寸相同 >

Question

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

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

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

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

     cxt.stroke();

我得到一个较小的矩形。为什么会这样？这是否意味着 canvas(x,y 坐标) 中的网格小于 1 个像素？

Answer 1

您是否显式设置了canvas 的宽度和高度？否则，您可能会在浏览器上看到奇怪的默认缩放设置。即:

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

此外，为确保您获得的是逐像素 Canvas ，请将 width 和 height 仅设置为属性，切勿在 CSS 中设置。这可能会导致您的 Canvas 在一个系统中绘制，但在另一个系统中显示。即，以下将使 Canvas 显示为其一半大小:

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

相关:Canvas is stretched when using CSS but normal with "width" / "height" properties