爲什麼畫布弧不是圓形的？

在JSFiddle中，我使用標準語法創建了一個弧，並創建了一個瘦長的elips。我發現我正在使用的CSS是口授尺寸而不是畫布。爲什麼是這樣？爲什麼畫布弧不是圓形的？

的jsfiddle：https://jsfiddle.net/jey2fodj/2/

HTML：

<div id='drawSpace'></div>

CSS：

.circle { 
    height: 100px; 
    width: 100px; 
    border: 1px solid black; 
}

的JavaScript：

var c = document.createElement('canvas'); 
c.className = 'circle'; 

var ctx = c.getContext("2d"); 
ctx.beginPath(); 
ctx.arc(50,50,50,0,3*Math.PI); 
ctx.stroke(); 

document.getElementById('drawSpace').appendChild(c);

來吧，更改寬度/高度風格幫助理解這個問題。謝謝。

來源

2016-11-13 Max

更改畫布的尺寸會拉伸畫布。爲了避免這樣做，請嘗試分別從樣式屬性中設置寬度和高度屬性。

來源：http://webglfundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html

作爲一個方面說明了圈子：你只需要2*Math.PI，不3*Math.PI。

來源

2016-11-13 22:57:11 Feathercrown

感謝您的資源，解釋好吧！ – Max

謝謝！總是樂於幫助！ – Feathercrown

我會建議單獨留下CSS，並將其全部設置爲Javascript，這是我發現的最簡單的方法。另外，我不知道最好的辦法，否則。

所以有CSS標籤，並有HTML屬性。 CSS標籤是.css文件中的內容，而html屬性是id中的<div id="thingy"></div>。對於畫布，你需要改變兩者。現在我嘗試將寬度和高度屬性添加到您的畫布上，但由於某種原因（由於某些原因，我會更新此答案），因此我使用javascript路由。

如果您創建html元素的javascript對象，那麼該對象的任何屬性都將成爲具有相同名稱的屬性。所以在html中，你可以說，<div id="thing" width="100"></div>，或者你可以說，HTML：<div id="thing"></div> JS：document.getElementById("thing").width = 100並且結果將是相同的。

最後一件事：在JS中，您可以使用htmlElement.style來使用Javascript編輯CSS。所以用Javascript，你想要設置屬性和CSS爲100（或100px，在css/style的情況下）。

你所創建的帆布後，

c.style.width = "100px"; 
c.style.height = "100px"; 
c.width = 100; 
c.height = 100;

其中，通過JavaScript的魔法，可以縮短到

c.style.width = (c.width = 100) + "px"; 
c.style.height = (c.height = 100) + "px";

更新小提琴這裏：https://jsfiddle.net/jey2fodj/3/

來源

2016-11-13 22:57:56 Howzieky

偉大的解決方案，但沒有解釋。 – Feathercrown

啊，對不起。我會解決這個問題 – Howzieky

我也傾向於這樣做：P – Feathercrown

你的CSS樣式元素，但不會更改畫布圖形上下文。畫布的繪製區域的默認尺寸爲300x150。如果畫布通過CSS調整大小，則繪製區域爲scaled to fit。畫布座標仍然是右邊的300和右邊的150。

爲了解決這個問題，還設置元素的尺寸屬性：（注意，這是從c.style.width和c.style.height這是CSS尺寸不同）

c.width = 100; 
c.height = 100;

來源

2016-11-13 23:02:52 Ouroborus

爲什麼畫布弧不是圓形的？

回答

相關問題