Нарисуйте линию круга, а затем удалите ее

90
10

У меня есть простой script, где я пытаюсь нарисовать круг, когда мышь проходит над холстом, и требуется около 2000 миллисекунд, когда мышь покидает холст, а затем стирает круг.


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


Это мой код:


canvas.addEventListener('mouseover',fill,false);
canvas.addEventListener('mouseout',erase, false);
function fill(){
circle.animate = true;
circle.direction = 1;
}
function erase(){
circle.animate = true;
circle.direction = 0;
}

function maths(){
if(circle.animate == true){
var amount = circle.vector * deltaTime;
if(circle.direction == 1){
circle.curAngle += amount;
}else if(circle.direction == 0){
circle.curAngle -= amount;
}

if(circle.curAngle % 2 == 0){
circle.curAngle = 0;
}
if(circle.curAngle == circle.endAngle){
circle.animate = false;
}

}
}

function draw(){
deltaTime = Date.now() - frame;
frame = Date.now();
maths();

context.clearRect(0,0,canvas.width,canvas.height);

context.beginPath();
context.arc(canvas.width/2, canvas.height/2, 100, circle.startAngle * Math.PI, circle.curAngle * Math.PI,false);
context.lineWidth = 2;
context.strokeStyle = 'blue';
context.stroke();

setTimeout(draw,1);

}

frames = Date.now();
draw();


Я тоже сделал скрипку: http://jsfiddle.net/hru7xyfu/, чтобы воспроизвести ошибку мыши над холстом и дождитесь его полного заполнения, а затем мыши, и вы увидите, что круг продолжает перезагружаться после полного его удаления.


Где я ошибаюсь?

спросил(а) 2021-01-19T16:22:42+03:00 6 месяцев, 1 неделя назад
1
Решение
77

Попробуйте заменить


if(circle.curAngle == circle.endAngle){
circle.animate = false;
}

с:

if(circle.curAngle < circle.endAngle){
circle.curAngle = circle.endAngle
circle.animate = false;
}
if(circle.curAngle > circle.endAngle + 2){
circle.curAngle = circle.endAngle + 2
circle.animate = false;
}

Второй оператор if решает проблему, когда круг становится слишком большим (хотя вы его не видите, потому что он начинает перекрываться)


Обновлен JSFiddle здесь:
http://jsfiddle.net/hru7xyfu/2/

ответил(а) 2021-01-19T16:22:42+03:00 6 месяцев, 1 неделя назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема