Позиция мыши в HTML 5 Холст

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

Вот мой код:

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

источник

2011-02-06 kartikq

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

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

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

источник

2011-02-06 18:58:39

Благодаря bebraw, что работал! Кажется, что ширина и высота CSS не определяют систему координат холста. Я должен был внимательно прочитать спецификации. – kartikq

Вы должны добавить пиксельный dimenstion к вашему холст элемента:

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

Здесь работает пример - http://jsfiddle.net/gorsky/GhyPr/.

источник

2011-02-06 19:15:28 gor

Спасибо, го! Я допустил ошибку, считая, что ширина/высота css также определяет систему координат для элемента canvas. – kartikq

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

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

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

источник

2011-02-06 21:46:28 canvastag

Позиция мыши в HTML 5 Холст

ответ

Смежные вопросы