Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: для новичков > Рисование дуг на канвасе

Автор: PsiMagistr 4.2.2020, 19:28

Добрый вечер.

Ребята, есть канвас.
При нажатии на кнопку клавиатуры рисуется дуга. Так должно быть.
Почему при повторном нажатии, та же дуга замыкается в контур?

Код


let angle = 0;

function degToRad (deg)
{
    return deg * (Math.PI / 180);
}


let canvas = document.querySelector(".scena");
let scena = canvas.getContext("2d");
scena.lineWidth = 1;

document.addEventListener("keydown", function(){
    scena.clearRect(0, 0, 500, 500);
    alert("Канвас очишается");
    scena.arc(200, 200, 200, degToRad(0), degToRad(270), false);
    scena.stroke();
});

Автор: ksnk 4.2.2020, 20:47

Все просто, с одной стороны... с другой - как посмотреть smile

первый клик:
Область очищается.
У тебя нет функции начала фигуры - beginPath, так что фигура начинается первым вызовом arc. рисуя нужную дуги и останавливаясь в верхней точке. Фигура состоит из одной дуги и она обрисовывается. Все, вроде как, правильно
Второй клик:
Область очищается.
фигура продолжается. Для начала следующей дуги фигура дополняется прямой линией к началу дуги и еще одной дугой того же размера. Итого фигура состоит из 2-х дуг одна над другой и соединяющего их отрезка. Фигура обрисовывается.
третий и т.д. клик:
область очищается, но фигура становится все больше и больше. Это выражается в том, что при отрисовке по тем же линиям толшина линий кажется больше.

Итого ошибка - нет beginPath и фигура остается одна и растет пр каждом клике.

Автор: PsiMagistr 5.2.2020, 12:21

Цитата(ksnk @ 4.2.2020, 20:47)

область очищается, но фигура становится все больше и больше. Это выражается в том, что при отрисовке по тем же линиям толшина линий кажется больше.

Итого ошибка - нет beginPath и фигура остается одна и растет пр каждом клике.

Большое спасибо!

Дейcтвительно дело было в beginPath()

Единственное, что я как-то не заметил роста фигуры при последующих кликах. Замкнутый контур видел. А может этот рост очень мал.