JavaScript Canvas 7. Спирограф

No video

JavaScript Canvas 7. Спирограф

Рет қаралды 17,693

Күн бұрын

⏰ Курс JavaScript 2.0: itgid.info/cou...
🧠 Чат Telegram c мозголомками : t.me/itgid_info
👇 Разверни для полной информации
💎 Курс Функции в JavaScript: itgid.info/cou...
🧑🏻‍💻 Сайт: itgid.info
😋 Курс Методы массивов: itgid.info/cou...
Рисуем анимированный спирограф в JS и canvas
Скачать файлы урока:w3.org.ua/canva...
Мы на facebook: / w3.org.ua

Пікірлер: 34

@user-sg7dn9wz2r 2 ай бұрын

При моем "таланте" к рисованию - это просто шедевр. Жаль на новый сайт подборку не перенесли еще

@user-rg8wz2rt9e 6 жыл бұрын

Какая красивая математика)

@itidiali2164 4 жыл бұрын

Лучшие уроки в мире ! Браво ! Можно урок по ползункам к примеру,но на другом каком то примере ?

@yippeeki-yey 5 жыл бұрын

Красота-то какая

@vvv7220 5 жыл бұрын

Лепота)

@arcadiibabici7655 3 жыл бұрын

Просто Круто!

@elena_sva 6 жыл бұрын

Спасибо, очень интересно. Впервые слышу о спирографе.

@foegit 6 жыл бұрын

Спасибо за урок! Очень информативно и интересно.

@user-ho5rm7qc7q 4 жыл бұрын

спасибо за интересный урок

@axpers99 6 жыл бұрын

Видео отличное. Вот значения переменных, при которых рисунок фактически является точной. var R=50; var r=50; var d=130;

@koshachevsky9660 7 жыл бұрын

Отлично!!! Спасибо!!!

@Damaskes11 7 жыл бұрын

Спасибо большое

@tigranovakyan2783 3 жыл бұрын

Как ни рисую -круг получается, формулу математическую не могли же поменять? 3 раза код проверил такой-же.

@lycaveknife5707 5 жыл бұрын

Сделал спирограф как в видео, добавил немного визуализации: круги и точку рисования на них, реализованные через div, и если отрисовать картинку в canvas а потом скрыть эти круги через display: none то картинка с canvas пропадает, код, скрывающий круги, только добавляет стиль к блокам, почему пропадает картинка с canvas?

@user-dn6wn4pz5q 6 жыл бұрын

А зачем выставлять в css размеры, если ты их указал в html файле?

@itgid 6 жыл бұрын

есть понятие внешнего размера кенвас и его внутреннего разрешения.

@MrMidianT 5 жыл бұрын

Очень интересное видео, спасибо! Вопрос: для чего нужна переменная timer? Ведь просто setTimeout(spiro, 25) работает без присвоения его к какой либо переменной? UPD: в данном видео оно не нужно, но можно timer остановить так (если на него назначен интервал, как в видео): clearTimeout(timer);

@itgid 5 жыл бұрын

Можно, просто по привычке присвоил.

@user-rv2ie5wj2v 5 жыл бұрын

@@itgid может для єтого: clearTimeout(timer);

@crocus161 4 жыл бұрын

Я так понял таймер, это почти тоже самое что фпс в игре

@anyka-6823 2 жыл бұрын

Не совсем он просто всегда выполняет цикличную задачу даже если открыта другая вкладка. по идее фпс в игре имитировать должен requestAnimationFrame чтобы при переключении на другие вкладки "игра не шла без игрока"

@gfgddtr6217 7 жыл бұрын

а как остановить таймер.допустим когда фигура нарисовалась.потому что бесконечная прорисовка просто глупо)!. а ещё интересно например сделать в канвасе постепенную прорисовку какого то слова.подскажите как это сделать

@itgid 7 жыл бұрын

Вопрос, когда считать фигуру нарисованной?

@anyka-6823 2 жыл бұрын

можно попробовать добавить кнопку с функцией clearTimeout (реализовать старт стоп) а дальше только эксперименты

@anyka-6823 2 жыл бұрын

В общём думая над этой темой по добавлени функционала старт/стоп полусилось следующие const DrawS = { canvas: null, context: null, R: 25, r: 80, d: 15, teta: 0.25, x: 300, y: 300, marker: 0, init(){ this.canvas = document.getElementById("canvas") this.context = this.canvas.getContext("2d") document.getElementById("stat").onclick =()=> {this.marker+=1 this.stopStart() if(this.marker >=2){ this.marker = 0 }} }, drawS(){ let x = (this.R-this.r)*Math.cos(this.teta) + this.d*Math.cos( (this.R-this.r)*this.teta/this.r) let y = (this.R-this.r)*Math.sin(this.teta) - this.d*Math.sin( (this.R-this.r)*this.teta/this.r) this.teta = this.teta + 0.1 this.context.fillStyle = "red" this.context.fillRect(300+x, 300+y, 4, 4); this.context.fill() }, drawSgoy(){ setTimeout(() => { window.requestAnimationFrame(()=>{this.drawS()}) }, 1000/60); }, stopStart(){setTimeout(()=> { if (this.marker == 1){ setTimeout(() => { window.requestAnimationFrame(()=>{this.drawS(), this.drawSgoy(), this.stopStart()}) }, 1000/60); } else if (this.marker == 0){ return } },10)}, start(){ this.init() this.stopStart() setInterval(()=>console.log(this.marker),2000) }, } window.addEventListener("load", DrawS.start())

@anyka-6823 2 жыл бұрын

@@itgid с clearTimeout так ничего и не получилось а вот с рекурсией это удалось сделать