<div style= "width: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);d Raw (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*2Is the JS calculation method, is round Context.closepath (); Context.fill ();} </script>
jquery Canvas user clicks on record