JavaScript - 無法用畫布繪製適當的圓圈

長時間潛伏在這裏的計算器。這是我的第一篇帖子，請你隨身攜帶。JavaScript - 無法用畫布繪製適當的圓圈

我有一個很小但很刺激的問題，用JavaScript繪製。基本上，無論如何，我都無法畫出一個合適的圈子。我總是得到一個橢圓。這裏有一個示例代碼來展示你的意思：

<!DOCTYPE html> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <title>Canvas Issue Example</title> 
     <style> 
      #canvas1 { 
       width: 200px; 
       height: 200px; 
       border: 1px solid black; 
      } 
     </style> 
     <script type="text/javascript"> 
      function canvasClicked(number) { 
       var c = "canvas" + number; 
       var canvas = document.getElementById(c); 
       var context = canvas.getContext("2d"); 
       var centerX = 150; 
       var centerY = 75; 

       context.beginPath(); 
       context.arc(centerX, centerY, 70, 0, Math.PI * 2); 
       context.lineWidth = 10; 
       context.strokeStyle = "red"; 
       context.stroke(); 
      } 
     </script> 
    </head> 
    <body> 
     <canvas id="canvas1" onclick="canvasClicked(1)"></canvas> 
    </body> 
    </html>

我試圖找出問題的原因，但沒有任何成功。我知道centerX和centerY應該等於element.width/2和element.height/2，但是這會給我帶來更加尷尬的結果，將橢圓從盒子的中心移開...不管怎麼說，這就是它。

你能幫我嗎？任何想法我失蹤？

來源

2014-07-14 neatsu

問題是這樣的：

#canvas1 { 
    width: 200px; 
    height: 200px; 
    border: 1px solid black; 
}

，同時使用這樣的：

<canvas id="canvas1" onclick="canvasClicked(1)"></canvas>

或更精確地說：可見CSS尺寸是不一樣的作爲底層的帆布尺寸。因爲未將它們設置爲元素上的屬性：

<canvas id="canvas1" onclick="canvasClicked(1)" width="200" height="200"></canvas>

將導致使用默認值300x150px的畫布。

演示：http://jsbin.com/geralevi/1/

進一步參考：https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Basic_usage

注意：如果您的渲染結果看上去變形，可以嘗試使用您的寬度和高度屬性明確的屬性，而不是使用 CSS。

來源

2014-07-14 11:47:55 Yoshi

非常感謝Yoshi！你救了我，問題修復了！ – neatsu

JavaScript - 無法用畫布繪製適當的圓圈

回答

相關問題