为什么不moveTo（0,0）; lineTo（X，X）;绘制45°线？

Question

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

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

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

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

Answer 1

听起来你正在用CSS调整画布大小。

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

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

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

Answer 2

markE完全正确。在您的示例中，您在HTML中设置了一个画布，其默认尺寸为300px×150px。然后，当您通过CSS设置尺寸时，画布将“拉伸”而不是调整大小。 markE解决方案的替代方法是使用显式尺寸设置画布：

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