我正在尝试绘制一个宽 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 个像素?
最佳答案
您是否显式设置了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
关于html - 为什么 38px x 38px 比 Canvas 矩形 38 x 38 大,尽管尺寸相同 >,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15583558/