javascript - 为什么不 moveTo(0, 0); 线到（X，X）；画45°线？

Question

今天我花了很多时间尝试做一些简单的画布工作（我已经有一段时间没有玩过了），但是线条没有画到正确的位置。事实证明是 JavaScript 和/或 Canvas 出了问题，而不是我的数学。给定一个 2D 画布上下文，如下：

context.moveTo(0, 0);
context.lineTo(50, 50);
context.stroke();

…画一条似乎在 30° 左右的线，而不是预期的 45°。这是一个 jsFiddle。

唯一有意义的方法是画布/上下文是否使用非方形像素……真的是这样吗？这可能是谁的好主意？有没有办法强制画布使用方形像素来让我的数学更容易？

score 5 · Accepted Answer

听起来您正在使用 CSS 调整画布的大小。

在 CSS 中调整大小实际上会导致图纸拉伸。

如果您需要调整大小，这不会“拉伸像素”：

var canvas=document.getElementById("myCanvas");
canvas.width=500;
canvas.height=300;

score 1 · Accepted Answer

markE 完全正确。在您的示例中，您在 HTML 中设置了一个画布，其默认尺寸为 300 像素 x 150 像素。然后，当您通过 CSS 设置尺寸时，画布会“拉伸”而不是调整大小。markE 解决方案的替代方法是设置具有明确尺寸的画布：

<canvas id="the-canvas" width="300" height="300"></canvas>

2 回答 2