畫布標籤在我的頁面上移動

我試圖簡單地在畫布標籤上跟蹤鼠標，並記錄它距離圓心的距離。問題是，它稍微關閉。畫布標籤在我的頁面上移動

當我在圓的右側時，在顯示r（半徑= 200）的距離之前，鼠標必須在圓內約1釐米。當我在圈子的左側時，我必須在圈外約1釐米處記錄r的距離。就像這個圈子向右移動了一點。

我試圖用a fiddle重現這一點，但奇怪的是，小提琴是完美的;它是現貨。

所以我想我的問題是，什麼會導致我的畫布標籤在我的頁面上移動約1釐米（但不是在小提琴）。我需要更好的DOCTYPE嗎？我在下面重現了我的整個源代碼。我已經在FF和Chrome中進行了測試，結果相同。

編輯

我也試過<!DOCTYPE html>無濟於事。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 

    <script type="text/javascript"> 

     $(function() { 

      var context = document.getElementById("myCanvas").getContext("2d"); 

      context.beginPath(); 
      context.moveTo(250, 250); 
      context.arc(250, 250, 200, 0, Math.PI * 2, false); 
      context.closePath(); 
      context.fillStyle = 'rgb(255,100,0)'; 
      context.fill(); 


      $("canvas").mousemove(function (e) { 
       var x = e.pageX; 
       var y = e.pageY; 

       var dist = Math.round(Math.sqrt(Math.pow(x - 250.0, 2) + Math.pow(y - 250.0, 2))); 

       console.log(dist); 
      }); 
     }); 


    </script> 


</head> 
<body> 

    <canvas id="myCanvas" width="800" height="800"> 

    </canvas> 

</body> 
</html>

來源

2012-01-12 Adam Rackis

它似乎加入'* {保證金：0，填充：0，border：0}'解決了這個問題，但是，我不知道額外的填充來自哪裏。 – 2012-01-12 00:30:15

@Jesse - 謝謝 - 我在開車回家的時候也有同樣的想法。這是一個有效的答案，所以把它扔掉，所以我可以upvote :) – 2012-01-12 00:32:22

是的，實際上body{margin:0, padding:0, border:0}看起來似乎有竅門。此外，在一個側面說明，而不是要求所有的數學函數下面將簡單和快速：

var x = e.pageX - 250; 
var y = e.pageY - 250; 
var dist = Math.round(Math.sqrt(x * x + y * y));

此外，使用css reset kit可能會解決所有瀏覽器中的所有問題。

我很好奇，所以我檢查默認值：

var bodyElement = $('body'); 

// Get the padding 
var widthPadding = bodyElement.css('padding-left') + bodyElement.css('padding-right'); 
var heightPadding = bodyElement.css('padding-top') + bodyElement.css('padding-bottom'); 
console.log(widthPadding + ", "+ heightPadding); 
// Get the margins 
var widthMargin = bodyElement.css('margin-left') + bodyElement.css('margin-right'); 
var heightMargin = bodyElement.css('margin-top') + bodyElement.css('margin-bottom'); 
console.log(widthMargin + ", "+ heightMargin); 
// Get the borders 
var widthBorder = bodyElement.css('border-left-width') + bodyElement.css('border-right-width'); 
var heightBorder = bodyElement.css('border-top-width') + bodyElement.css('border-bottom-width'); 
console.log(widthBorder + ", "+ heightBorder);

輸出是這樣的上FF 9.0.1是：

0px0px, 0px0px 
8px8px, 8px8px <-- So obviously you only need to reset the margins to 0 
0px0px, 0px0px

來源

2012-01-12 00:37:35

偉大的作品 - 謝謝你。我會留下這個開放一點，看看是否有人可以提供更多的信息，這個默認填充/邊距來自 – 2012-01-12 01:10:55

*「另外，使用CSS重置套件可能會解決所有瀏覽器的所有問題。」*天哪，這將是多麼美好的世界。 – 2012-01-12 18:43:26

畫布標籤在我的頁面上移動

回答

相關問題