3

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

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

在左上角产生一个大约针头大小的黑色规格。要使矩形具有任何大小，例如大约 1/4 的画布，需要调整到：

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

那么，这幅画布的比例是如何倾斜的呢？是的，我想我可以将它“缩小”到类似于正常的东西，但我想首先弄清楚是什么导致了这种情况。我已经禁用了 Jquery，认为它可能会以某种方式干扰，但这并没有帮助。

有任何想法吗？

更新：

画布按照以下方式添加到 dom 中：

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

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

4

1 回答 1

6

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

你需要这样做：

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

如果你这样做：

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

将会发生的是画布元素使用默认大小（300x150，请参见此处：http: //jsfiddle.net/AbdiasSoftware/CfM ​​Nf/ ），然后通过 css 将其缩小到 30x30，这意味着现在绘制到画布上的所有内容都将相应地进行缩放。

于 2013-06-11T00:24:53.310 回答