为什么38px x 38px比画布矩形38 x 38大,尽管尺寸相同>

Question

我想绘制一个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像素？

Answer 1

您是否canvas明确设置了宽度和高度？如果没有,您可能会在浏览器上获得奇怪的默认缩放设置.即:

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

此外,为了确保获得像素对像素画布,仅设置width和height作为属性,从不在CSS中.这可能会导致您的画布在一个系统中绘制,但显示在另一个系统中.即,以下将使画布显示为其大小的一半:

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

相关:使用CSS时画布被拉伸,但"宽度"/"高度"属性正常