HTML Canvas 比例尺

Question

我已经开始尝试在 Canvas 对象上绘图。在过去，我对 Canvas 的接触一直以图像处理为中心 (NPI)，因此我对它的坐标系和转换过程比较熟悉。我正在使用屏幕尺寸为 30 X 30 的测试 Canvas 。在获得 2D 上下文的句柄后，我发出一个调用:

ctx.fillRect(0,0,10,10);

在左上角产生一个针头大小的黑色小规范。要使矩形成为任意大小，比如 Canvas 的大约 1/4，需要调整为:

ctx.fillRect(0,0,200,200);

那么，这幅 Canvas 的比例是如何倾斜的？是的，我想我可以将它“缩小”到类似正常的状态，但我想首先弄清楚是什么原因造成的。我已经禁用了 Jquery，认为它可能会以某种方式进行干扰，但这并没有帮助。

有什么想法吗？

更新:

Canvas 沿着这些线被添加到 dom 中:

<canvas id='foo_" + self.groupIndex + "' class='hCanvasClassName'>"

CSS 将宽度定义为 100%，高度由 JS 代码指定。

Answer 1

你没有显示代码，但听起来你已经使用 CSS 应用了 Canvas 的大小，而不是直接在元素上应用，这可以解释为什么它会缩小。

你需要这样做:

<canvas width="30" height="30" id="myCanvas"></canvas>

如果你这样做:

<canvas style="width:30px;height;30px;" id="myCanvas"></canvas>

会发生的是 Canvas 元素使用默认大小(300x150，请参见此处:http://jsfiddle.net/AbdiasSoftware/CfMNf/)，然后您通过 css 将其缩小到 30x30，这意味着现在绘制到 Canvas 上的所有内容都将相应地缩放。