왜 moveTo (0, 0); lineTo (X, X); 45도 선 그리시겠습니까?

Question

오늘은 간단한 캔버스 작업을 시도하면서 많은 시간을 보냈지만 (나는 꽤 오랫동안 연주하지 못했지만) 선은 올바른 위치로 그리지 않았습니다. 자바 스크립트 및/또는 Canvas라는 것이 내 수학이 아니라 엉망인 것으로 밝혀졌습니다. 2 차원 캔버스 상황을 감안할 때, 다음

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

마르크가 완전히 권리가 있습니다. 귀하의 예에서는 기본 크기가 300x150 픽셀 인 HTML에 캔버스를 설정했습니다. 그런 다음 CSS를 통해 크기를 설정하면 크기가 조정되지 않고 캔버스가 늘어납니다. markE 솔루션의 대안은 명시된 크기로 캔버스를 설정하는 것입니다.

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