Javascript 画布标记在我的页面上移动_Javascript_Html_Html5 Canvas

Javascript 画布标记在我的页面上移动

javascript html html5-canvas

Javascript 画布标记在我的页面上移动,javascript,html,html5-canvas,Javascript,Html,Html5 Canvas,我试图简单地在画布标记上跟踪鼠标，并记录它离圆心的距离。问题是，它有点走火入魔了当我在圆圈的右侧时，鼠标必须在圆圈内约1厘米处，然后我才能显示距离r（半径=200）。当我在圆圈的左侧时，我必须在圆圈外约1cm处记录r的距离。好像圆圈向右移动了一点我试着用小提琴复制这个，但奇怪的是，小提琴是完美的；真是恰到好处所以我想我的问题是，是什么导致我的画布标签在我的页面上移动了1厘米（但不是在小提琴上）。我需要更好的DOCTYPE吗？我在下面复制了我的全部资料。我在FF和Chrome上测试过，结果都

我试图简单地在画布标记上跟踪鼠标，并记录它离圆心的距离。问题是，它有点走火入魔了

当我在圆圈的右侧时，鼠标必须在圆圈内约1厘米处，然后我才能显示距离r（半径=200）。当我在圆圈的左侧时，我必须在圆圈外约1cm处记录r的距离。好像圆圈向右移动了一点

我试着用小提琴复制这个，但奇怪的是，小提琴是完美的；真是恰到好处

所以我想我的问题是，是什么导致我的画布标签在我的页面上移动了1厘米（但不是在小提琴上）。我需要更好的DOCTYPE吗？我在下面复制了我的全部资料。我在FF和Chrome上测试过，结果都一样

编辑

我还尝试了

，但没有成功

<!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>


$（函数（）{
var context=document.getElementById（“myCanvas”）.getContext（“2d”）；
context.beginPath（）；
上下文。移动到（250250）；
arc（250250200,0，Math.PI*2，false）；
closePath（）；
context.fillStyle='rgb（255100,0）'；
context.fill（）；
$（“画布”）.mousemove（函数（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））；
控制台日志（dist）；
});
});

是的，实际上似乎

正文{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));

此外，使用a可能会解决所有浏览器的所有问题

我很好奇，所以我检查了默认值：

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

0px0px，0px0px
8px8px，8px8px添加*{margin:0，padding:0，border:0}
似乎解决了问题，但是，我不确定额外的填充是从哪里来的。@Jesse-谢谢-我开车回家的时候也有同样的想法。这是一个非常有效的答案，所以把它扔了吧，这样我就可以投票了：）效果很好-谢谢。我会留一点空白，看看是否有人能提供更多关于这个默认填充/边距的信息“而且，使用css重置工具包可能会解决所有浏览器的所有问题。”天哪，这将是一个多么美妙的世界。