可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I am writing a simple drawing app to get an understanding of the HTML 5 canvas. The problem is that I simply can't seem to get the correct mouse position within the canvas element.I've looked at the other questions on stackoverflow like the one here getting mouse position with javascript within canvas that address this issue but their solutions don't seem to help me.

Here is my code:

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

What am I doing wrong here? I have tested this in both Chrome/Firefox.

回答1:

Your canvas is missing width and height properties. In the current solution it just scales the default to fit your CSS. This in turn breaks your mouse coords. Try something along

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

as your canvas markup.

回答2:

Suppose your canvas has already been declared...

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 will update when you mouse move on the canvas

回答3:

You should add pixel dimenstion to your canvas element:

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

Here is working example - http://jsfiddle.net/gorsky/GhyPr/.

文章来源: Mouse position within HTML 5 Canvas

标签

canvas

position

test