我有一個非常簡單的代碼應該繪製一個圓圈，但它看起來不像一個，而不是在正確的位置座標都有所偏移。畫布設置爲style="width: 600px; height: 600px;"。我在Chrome和safari上試過它 - 看起來相同，所以它不是瀏覽器錯誤。所以我的問題是（有可能是兩個一個答案）：爲什麼畫布圓圈看起來不像一個圓圈？

如果我把中心在（100，100），爲什麼是圓沒有從左邊邊框的距離相等，它是從頂部邊界？
爲什麼（300,300）指出畫布而不是中心？

代碼：

var context = document.getElementById('c').getContext("2d"); 
context.fillStyle = 'black'; 
context.fill(); 
context.beginPath(); 
context.arc(100, 100, 30, 0, 2 * Math.PI, true); 
context.stroke();

如何看起來： enter image description here

編輯

據我發現，寫<canvas id="myCanvas" style="width: 578px; height: 200px;"></canvas>是造成這個問題，寫<canvas id="myCanvas" width="578" height="200"></canvas>解決了評論它。有人知道爲什麼

來源

2013-01-01 Ramzi Kahil

您是否在'

@DCoder我有這樣的代碼：'' –

@MaggiQall Why 3？ PI是半個圓（等於180度）。所以2 * PI是一個整圓 - 360度 –

這在HTML5 Canvas spec中有記錄。

的HTML屬性width="x" height="y"描述繪圖畫布和默認的區域到300 × 150 px。作爲一個副作用，它們描述了畫布的默認可見尺寸。

該CSS屬性width: x; height: y;設置在畫布上可以拉伸/緊湊的繪圖區域，但他們不改變它的大小。

對於您的情況，瀏覽器拉伸默認繪圖區域（300 × 150 px）以滿足給定的CSS 600 × 600 px。

來源

2013-01-01 15:28:55 DCoder

這個例子說明了如何在畫布上繪製一個圓：http://www.html5canvastutorials.com/tutorials/html5-canvas-circles/

此外，您還需要設置畫布元素上width和height屬性，而不是作爲一個style屬性，像這樣：

<canvas id="c" width="600" height="600" style="background-color:yellow;"></canvas>

來源

2013-01-01 15:19:09 udidu

是的，我剛剛發現，根據評論。你有什麼想法，爲什麼？ –

轉到此鏈接：http://stackoverflow.com/questions/2588181/canvas-is-stretch-when-using-css-but-normal-with-old-width-and-height-proper – udidu

爲什麼畫布圓圈看起來不像一個圓圈？

編輯

回答

相關問題