admin管理员组

文章数量:1303411

I'm writing a simple script where the user clicks anywhere in a canvas and there appears a circle.

The script works but not correct. Somehow the cordinates where the click event happens and the circle center don't match. Any ideas why?

Here is the code : 

<html>
<head>
<script type="text/javascript" src=".js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
     $("#special").click(function(e){ 

        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop; 

        /* var c=document.getElementById("special"); */
        var ctx= this.getContext("2d"); /*c.getContext("2d");*/
        ctx.beginPath();
        ctx.arc(x, y, 10,0, 2*Math.PI);
        ctx.stroke();

        $('#status2').html(x +', '+ y); 
   }); 
})  

</script>
<body> 
    <h2 id="status2">0, 0</h2>
    <canvas style="width: 500px; height: 500px; border:1px ridge green;" id="special">

    </canvas>
</body>
</html>

I'm writing a simple script where the user clicks anywhere in a canvas and there appears a circle.

The script works but not correct. Somehow the cordinates where the click event happens and the circle center don't match. Any ideas why?

Here is the code : 

<html>
<head>
<script type="text/javascript" src="http://code.jquery./jquery-latest.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
     $("#special").click(function(e){ 

        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop; 

        /* var c=document.getElementById("special"); */
        var ctx= this.getContext("2d"); /*c.getContext("2d");*/
        ctx.beginPath();
        ctx.arc(x, y, 10,0, 2*Math.PI);
        ctx.stroke();

        $('#status2').html(x +', '+ y); 
   }); 
})  

</script>
<body> 
    <h2 id="status2">0, 0</h2>
    <canvas style="width: 500px; height: 500px; border:1px ridge green;" id="special">

    </canvas>
</body>
</html>
  • javascript
Share Improve this question asked Mar 26, 2013 at 14:33 BorBor 7933 gold badges21 silver badges46 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 6

You need to add the width and height properties to your canvas element like so: (you have it in style)

 <canvas width="500px" height="500px" style="width: 500px; height: 500px; border:1px ridge green;" id="special">

Check out this fiddle:

http://jsfiddle/7xQZ2/

Adding the width and height parameters will specify how many pixels your canvas should be. The style one just shows how big it should be displayed (everything on it would get stretched).

The canvas element needs the height and width tags. It's kind of odd, especially for HTML5 notation.

Try adding this in your document ready-statement (before your canvas drawing-code) and jQuery will add them for you based on your CSS styles.

$('#special').attr('height', $('#special').css('height'));
$('#special').attr('width', $('#special').css('width'));

The plus-side of this method over using manual addition of the attribute-values is that you only need to store the dimensions once, ruling out future confusion if you would use external stylesheets;

CSS

#special {
    width: 500px;
    height: 500px;
    border:1px ridge green;
}

HTML

<canvas id="special">Not supported</canvas>

JSfiddle

本文标签： JavaScript draw a circle on mouse clickcordinates don39t matchStack Overflow

版权声明：本文标题：JavaScript draw a circle on mouse click - cordinates don&#39;t match - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741747687a2395634.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。