Положение мыши в HTML 5 Canvas - PullRequest
Новая
       3

Положение мыши в HTML 5 Canvas

4 голосов
/ 06 февраля 2011

Я пишу простое приложение для рисования, чтобы получить представление о канве HTML 5.Проблема в том, что я просто не могу получить правильную позицию мыши в элементе canvas. Я смотрел на другие вопросы по stackoverflow, как здесь получение позиции мыши с помощью javascript в canvas по этому адресуэта проблема, но их решения, кажется, не помогают мне.

Вот мой код: 

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Untitled Document</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
        <style type="text/css">
            #test {
                border: solid black 1px;
                width: 500px;
                height: 500px;
            }
        </style>
        <script type="text/javascript">
            $(function(){
                var canvas=document.getElementById('test');
                if(canvas.getContext){
                    var ctx =canvas.getContext('2d');       
                    var draw = false;
                    ctx.strokeStyle = "rgb(200,0,0)";
                    ctx.lineWidth = 3;
                    ctx.lineCap = "round"; 

                    $('#test').mousedown(function(){draw=true;});
                    $('#test').mouseup(function(){draw=false;});
                    $('#test').mousemove(function(e){
                        if(draw){
                            var x , y;
                            x = e.layerX;
                            y = e.layerY;
                            ctx.moveTo(x,y);
                            ctx.lineTo(x+1,y+1);
                            ctx.stroke();
                                             }
                                    });
                }
            });
        </script>
    </head>
    <body>
        <canvas id="test"></canvas>
    </body>
</html>

Что я здесь не так делаю?Я проверил это в обоих Chrome / Firefox.

Ответы [ 3 ]

5 голосов
/ 06 февраля 2011

Вашему холсту не хватает свойств ширины и высоты. В текущем решении он просто масштабирует значение по умолчанию, чтобы соответствовать вашему CSS. Это в свою очередь нарушает ваши координаты мыши. Попробуйте что-нибудь вместе 

<canvas id="test" width=500 height=500></canvas>

как ваша разметка холста.

3 голосов
/ 07 февраля 2011

Предположим, ваш холст уже объявлен ... 

var Mouse = { //make a globally available object with x,y attributes 
    x: 0,
    y: 0
}
canvas.onmousemove = function (event) { // this  object refers to canvas object  
    Mouse = {
        x: event.pageX - this.offsetLeft,
        y: event.pageY - this.offsetTop
    }
}

Мышь будет обновляться при перемещении мыши по холсту

2 голосов
/ 06 февраля 2011

Вы должны добавить размер в пикселях к элементу холста: 

<canvas id="test" width='500px' height='500px' ></canvas>

Вот рабочий пример - http://jsfiddle.net/gorsky/GhyPr/.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...