Холст тег смещен на моей странице - PullRequest
Новая
       1

Холст тег смещен на моей странице

0 голосов
/ 12 января 2012

Я пытаюсь просто отследить указатель мыши над моим холстом и записать, как далеко он находится от центра круга. Проблема в том, что он немного выключен.

Когда я нахожусь на правой стороне круга, мышь должна находиться примерно в 1 см внутри круга, прежде чем я покажу расстояние r (радиус = 200). Когда я нахожусь на левой стороне круга, я должен быть на расстоянии около 1 см от круга, чтобы зарегистрировать расстояние r. Как будто круг смещен немного вправо.

Я пытался воспроизвести это с скрипкой , но, как ни странно, скрипка идеальна; это место.

Так что я предполагаю, что мой вопрос заключается в том, что могло бы привести к смещению тега canvas на 1 см на моей странице (но не на скрипке). Нужен ли мне лучший DOCTYPE? Я воспроизвожу весь мой источник ниже. Я тестировал как в FF, так и в Chrome - один и тот же результат.

EDIT

Я тоже пытался <!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>

1 Ответ

1 голос
/ 12 января 2012

Да, на самом деле кажется, что 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
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...