javascript - 为什么不 moveTo(0, 0); lineTo(X, X);画一条45°线？

Question

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

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

…画出一条线，似乎是 30° 左右，而不是预期的 45°。 Here's a jsFiddle .

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

Answer 1

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

在 CSS 中调整大小实际上会导致绘图被拉伸(stretch)。

如果您需要调整大小，这不会“拉伸(stretch)像素”:

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