Angle: Radius: Cursor xpos: Cursor ypos: Cursor xpos: Cursor ypos: |
Canvas<canvas id="ctx" width="350" height="350" style="border: 1px solid #ccc; position: relative;"></canvas> Mousemouse in javascriptvar mouseX, mouseY; document.addEventListener("mousemove", function(e){ mouseX = e.pageX; mouseY = e.pageY; document.getElementById("curx").innerHTML = mouseX; document.getElementById("cury").innerHTML = mouseY; }); Mousemove in jQueryvar mouseX, mouseY; $(document).mousemove(function(e) { mouseX = e.pageX; mouseY = e.pageY; $("#curx").text(mouseX); $("#cury").text(mouseY); }).mouseover(); Functions (calcAngle, calcRadius, sequence loop)var frameno = 0; var fps = 100; var canvas = document.getElementById("ctx"); var ctx = canvas.getContext("2d"); function calcAngle(xpos1, ypos1, xpos2, ypos2){ // centerx, centery + mouseX, mouseY var deltax = ypos2 - ypos1; var deltay = xpos2 - xpos1; var angle = (Math.atan2(-deltay, deltax) + Math.PI/2); if(angle < 0){ angle = 2 * Math.PI + (angle); } return angle; } function calcRadius(xpos1, ypos1, xpos2, ypos2){ // centerx, centery + mouseX, mouseY var deltax = ypos2 - ypos1; var deltay = xpos2 - xpos1; var radius = Math.sqrt(Math.pow(deltax, 2) + Math.pow(deltay, 2)); return radius; } function resetCanvas(){ ctx.clearRect(0, 0, canvas.width, canvas.height); } var xpos1, ypos1, xpos2, ypos2, angle, radius; function sequence1() { setTimeout(function () { frameno = frameno + 1; resetCanvas(); xpos1 = 175; ypos1 = 175; xpos2 = mouseX - canvas.offsetLeft; ypos2 = mouseY - canvas.offsetTop; angle = calcAngle(xpos1, ypos1, xpos2, ypos2); radius = calcRadius(xpos1, ypos1, xpos2, ypos2); /* WRITE TO DIVS */ document.getElementById("angle").innerHTML = angle + " (degree: "+(angle*180/Math.PI)+")"; document.getElementById("radius").innerHTML = radius; document.getElementById("curx2").innerHTML = xpos2; document.getElementById("cury2").innerHTML = ypos2; /* MAKE CENTER CIRCLE */ ctx.beginPath(); ctx.arc(xpos1, ypos1, 10, 0, 2*Math.PI, true); ctx.fill(); /* MAKE POINTER LINE */ ctx.beginPath(); ctx.moveTo(xpos1, ypos1); ctx.lineTo(xpos1 + 20*Math.cos(angle), ypos1 + 20*Math.sin(angle)); ctx.stroke(); /* MAKE CURSOR CIRCLE */ ctx.beginPath(); ctx.arc(xpos2, ypos2, 25, 0, 2*Math.PI, true); ctx.fill(); sequence1(); }, fps); } sequence1(); |