为什么不moveTo(0,0); lineTo(X,X); 绘制45°线？

Question

今天我花了很多时间尝试做一些简单的画布工作(我在很长一段时间没有玩过),但是线条没有画到正确的位置.事实证明,它是JavaScript和/或Canvas,而不是我的数学.给定2D画布上下文,如下:

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

...绘制一条似乎在30°左右的线,而不是预期的45°.这是一个jsFiddle.

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

Answer 1

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

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

如果你需要调整大小,这不会"拉伸像素":

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