<div style="200px; height:20px; position:fixed; top:0; left:0; background-color:blue;"> <span id="x"></span>- <span id="y"></span>- <span id="v"></span>- <span id="w"></span> </div> <script> $('html').mousemove(function(){ $("#x").text(event.pageX); $("#y").text(event.pageY); $("#v").text(event.clientX); $("#w").text(event.clientY); }) $('html').click(function(){ var wdWidth = document.body.scrollWidth; var wdHeight = document.body.scrollHeight; var x = event.pageX; var y = event.pageY; //alert(x + ' ' + y + ' ' + wdWidth + ' ' + wdHeight); draw(x,y); }) </script> <canvas id="yuanxing" width="1300px" height="1300px" style="position:absolute;top:0;left:0;"> </canvas> <script type=text/javascript> function draw(x,y,r){ var r = arguments[3] || 20; var canvas=document.getElementById("yuanxing"); var context=canvas.getContext("2d"); context.fillStyle="blue"; context.beginPath(); context.arc(x,y,r,0,Math.PI*2,true); //Math.PI*2是JS计算方法,是圆 context.closePath(); context.fill(); } </script>