javascript холст - линия, следующая за положением мыши - PullRequest
Новая
       43

javascript холст - линия, следующая за положением мыши

0 голосов
/ 10 июля 2020

Я пытаюсь сделать линию на холсте так, чтобы она следовала за положением мыши на 360 градусов, начиная с центра круга.

Пока это мой код, но я не могу сделать прямые углы. Любое решение, спасибо.

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

1 Ответ

1 голос
/ 10 июля 2020

Эта формула рассчитает нужный вам угол. 

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

Рабочий фрагмент: 

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>
...