|
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();
|
