javascript canvas - 跟随鼠标的线 position

Question

im trying to make line in canvas to follow mouse position in 360 degrees, starting from circle center.

This is my code so far but i cant make right angles. Any solution thanks.

https://jsfiddle.net/1L3j2vyw/

var canvas = document.getElementById('paint');
var ctx = canvas.getContext('2d');

canvas.addEventListener('mousemove',function(e){
    //mouse position
    var x = e.clientX - this.offsetLeft;
    var y = e.clientY - this.offsetTop;
    //clear canvas
    ctx.clearRect(0,0,640,640);
    //draw circle
    ctx.strokeStyle = 'yellow';
    ctx.beginPath();
    ctx.arc(200, 200, 150, 0, 2 * Math.PI);
    ctx.stroke();
    //line lenght and position
    var length = 150;
    var angle = 0;
    var newPosX = x - 200;
    var newPosY = y - 200;
    var theta = newPosY/newPosX;
    var angle = Math.atan2(-newPosX, -newPosY) * 180/Math.PI - 90;
    angle = angle < 0 ? 360 + angle : angle; 
    var pi = Math.PI;
    angle =  angle * (pi/180);
    var x2 = 200 + length * Math.cos(angle),
        y2 = 200 + length * Math.sin(angle);
    //draw line
    ctx.strokeStyle = 'blue';
    ctx.lineWidth = 3;
    ctx.beginPath();
    ctx.moveTo(200, 200);
    ctx.lineTo(x2, y2);
    ctx.stroke();
}); 

Answer 1

This formula will calculate the angle you need.

var angle = -Math.atan2(newPosX, newPosY) * 180 / Math.PI + 90;

Working Snippet:

 var canvas = document.getElementById('paint'); var ctx = canvas.getContext('2d'); canvas.addEventListener('mousemove',function(e){ //mouse position var x = e.clientX - this.offsetLeft; var y = e.clientY - this.offsetTop; //clear canvas ctx.clearRect(0,0,640,640); //draw circle ctx.strokeStyle = 'yellow'; ctx.beginPath(); ctx.arc(200, 200, 150, 0, 2 * Math.PI); ctx.stroke(); //line lenght and position var length = 150; var angle = 0; var newPosX = x - 200; var newPosY = y - 200; var theta = newPosY/newPosX; var angle = -Math.atan2(newPosX, newPosY) * 180/Math.PI + 90; angle = angle < 0? 360 + angle: angle; var pi = Math.PI; angle = angle * (pi/180); var x2 = 200 + length * Math.cos(angle), y2 = 200 + length * Math.sin(angle); //draw line ctx.strokeStyle = 'blue'; ctx.lineWidth = 3; ctx.beginPath(); ctx.moveTo(200, 200); ctx.lineTo(x2, y2); ctx.stroke(); });

 <canvas id="paint" width="640" height="640"></canvas>