爲什麼不moveTo（0，0）; lineTo（X，X）;畫一條45°線？

我今天花了很多時間試圖做一些簡單的畫布作品（我在很長一段時間裏還沒玩過），但線條並沒有畫到正確的地方。事實證明，這是JavaScript和/或帆布是棘手的，而不是我的數學。鑑於2D畫布背景下，以下內容：爲什麼不moveTo（0，0）; lineTo（X，X）;畫一條45°線？

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

...繪製，這似乎是在30°左右，沒有45°預期一條線。 Here's a jsFiddle。

如果畫布/上下文使用的是非方形像素，這種方法纔有意義的唯一方法是這樣嗎？這可能是一個好主意嗎？有沒有辦法強制畫布使用方形像素來讓我的數學更容易？

將'未繪製直角'更改爲'未繪製45度角'。等腰也並不意味着你認爲它的意思。不過，我不知道爲什麼它顯然[表現不好]（http://jsfiddle.net/t6HaC/10/）。 –

夠公平的。自從我有幾何幾何類以來已經有一段時間了。 –

聽起來你正在用CSS調整畫布的大小。

調整大小在CSS 實際上確實導致拉伸圖紙。

如果需要調整，這不會「拉伸像素」：

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

2013-08-27 21:25:40 markE

如果你認爲'

坊間有它完全正確。在你的例子中，你已經在HTML中設置了一個畫布，其默認尺寸爲300px x 150px。當你通過CSS設置尺寸時，畫布會變得「拉伸」而不是調整大小。 markE的解決方案的替代方案是設置具有明確尺寸的畫布：

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

2013-08-27 22:26:42 KaliedaRik

這裏是'width =「300px」'而不是'width =「300」'？ –

畫布只能使用像素大小，所以使用'px'後綴不會（不應該）工作。像Garret那樣指出一個簡單的值。（寬度=「300」等）。 – K3N

被抓住了！我編輯了我的答案。 – KaliedaRik

回答