Димитар Георгиев

Рисовалка - canvas

Speakings 0 комментариев
Рисовалка - canvas
  • Рисовалка - canvas именно - що DOM структура нам нужна ейо контекс с точке 
    зрение програмирование, другая сторона етого - же самого канвас. Она так и 
    назъйваеться, contex и тепер она ссилает/ся на АPI  и все что будем рисоват будет
    отображаеться на DOM структуре. В обработчике собития есть contex, и this 
    назъйваеться contex. Прямую линийю начальнъй точке x1, y1, конечная точки x2, y2. 
    Ставим перо moveTo() oт куда мъй будем начат рисовать. Kуда мъй хатим придтйи
    lineTo(). Что бъй въйзовать, нужно и метод stroke(). Y с верху в нис, Х с 
    лево на право. Круг с център (x, y). 

 

  • Если в arc() аргумент true  то рисует обратно  по часовой стрелке, если false 
    то рисует по чaсовой стрелке. Для закрашение круги, установляем fillStyle()
    - цвет заливке. cos и син принемает в аргумента radiana a tick увеличивается 
    на 1, целъй круг ето 2PI. Canvas не очищаеться ,он рисусет с верх поетаму нам 
    нужно в каким то образа очищит canvas context.clearRect и указат каую област
    именно хочит очистит. Рисоват через setInterval() ето плахая идея, получется 
    что loop может въйзъйваться чаще чем мъй очищаем екран, и некаторъй фримъй мъй 
    просто даже не увидем. Что делат ? requestAnimationFrame регистриует
    въйзов функций в следощий момент обновление екрана вот что!Ок я запомнпю ето
    функцию и буду обновлят в момент обновление екрана, нам не нужно тепер ждат
    когда пройдет 0 милисекунд , он ждет когда обновляется екран. Въйзъйвает 
    функцию толко един раз и всю. requestAnimationFrame передают във функцию 
    timestamp - количество ms. каторъйе данная страница существует. Могу считат 
    угол не от tick  а от количество милисекунд катиеъй прошли с начало существувание
    моя страница. Умножаем timeScale * timestamp и скорост на всех кмпютри будет 
    единакава. Очищаем только canvasMouse а canvasBasic будет статически риссунка.
    
    Очишат будем только canvas.mouse  а canvas.basic не будем так как ето статистически 
    рисунок!
    
    Мouse олицетворят положение миши на канвасе. Event функция обработчик
    относително что бъй узнат позицию x, y относительно нашего Canvas и получаем 
    координати ( x, y) непосредствено самой canvas . C начала у canvasMouse 
    запросим getBoundingClientRect по болшому счоту ето его позиция относително 
    верхнева легого угла. Для того что бъй узнат позицию x , y относително 
    самого canvas нам нужно въйчислит из clientX , rectX. Taким же образам получаем
    координатъй X, Y непосредствено над самой canvas. Възовем функцию drawPoint где 
    мъй будем рисоват точку с начало mouse.x, mouse.y 
    
    прижемал Функция getImage(src), с аргумент src - oт куда мне взят изображение, 
    будет возвращает изображение а  promise въйдават картинку в тот момент когда 
    изображение загружено на компютър, только после етого въйдават мне изображение.
    Дождатся когда картинка вернется и после етого запустит мой главнъй loop. Atlas 
    ето обект каторъй съответствует в обект в файле atlas.json Функция drawImage
    рисует картинка  (sx, sy, sWidth, sHeight) --> kakой фрагмент картинке мъй
    хатим нарисоват a   (dx, dy, dWidth, dHeight) --> где на canvas мъй хотим их 
    наарисовать.Тепер нужно что етий айдишники с определюннаю очерюднаст 
    очищальис. Нада знат таймер, сколько секунд етой фрейм активен. get cooldown() 
    възвращает как долга текущий  фрейм должен бъйт активен. Если 4 фрейма должнъй 
    меняется за 1000 мс, то мъй понимаем что каждъй из них меняется за 250 мс.frameOrder 
    хранит какой счоту фрейм нас интересен. Надо каким то образам таймер увеличеват. 
    Надо каким то образам в loop пердават количества мс. каторой прошло с предъйдущему 
    timestamp поетаму введюм pTimestamp. dTimestamp --> сколко прошло мс. преведущего
    въйзова нашего лупа. Метод tick по большому счоту увеличавает таймер. 
    frameOrder циклически повтаряться
  • Symbol - Каждъй раз когда саздаем новъй Симбол , тъй создаеш уникальная 
    структура, даннъй каторъй в никаким образам больше не повторит. 
    Symbol может использовзат в качестве имеон для обект. Я могу исползую Симбол
    в качество ключей для обекта. По сути не могу изменит тот обект каторъй я 
    инициировал заранее. Taк как я не использувал переменную етот Symbol 
    потерялся и боле я никаких образам изменит не магу. Изменит их извне я 
    никак не смагу т.е. у меня ето поле польностю защищено от озменение клиента. 
    У меня есть доступ через вот етой област видимости . У меня появился 
    доступ к етому имея но доступ к непосредствено на то что ссилаеться this я могу
    получит в етой внутре защиящюная област видимости. Symbol попътка создат приватнъйе
    поля, класъйх, но хоть и видимъйе из вне. Symbol позволяет защищат даннъй, плюс 
    она позволяет создават уникальнъй для все системъй обектъй хоть с единакавъй 
    именами ( аргументами ). Уже есть зарание созданъйе Symbol от сам браузер на
    уравне ядра. Mъй не можем с помощи for-of объйти обект, нет такой възможностте, 
    не съществует операция в js каторъй позволяла обоити обекта с for-of. Генератор 
    позволяет создават прериваемъйе функций . this ссилаеться на обект person {} и 
    можно достучаться до етий параметръй  через this. Логика обхода обекта через
    Symbol.iterator т.е того символъй каторъй бъйл изначально вшит. Будет ли
    съществует етого обхот итератора по ключа обекта когда у нас нет примитива? 
    Когда я запрашиваю Object,keys от екемпляра етого класса this, символъй 
    не итерируемъй т.е. наш кейс не может пройтис по етий симболъй а иначе етъй 
    Symboly не бъли бъй такие уникальние Мъй просто позволим нашего Симбол
    оператор пройтис не по ключа а по значение. Moжни оередат име ключа и значение 
    такого Symbola. LifeHach мозжно изменит прототип обекта прямо в какой нибуд 
    файле обратится к класу Оbject к его прототипу, сдес обратиться к Symbol.iterator 
    и создат сдес функцию генератор и сдес описат логику каторъй нам интересна 
    (прoходить по всем ключа). Тепер мъй сделали все обектъй, кроме примитиву 
    итерируемъй, все класса унаследванъйе из класса Обект . Я определил на уравне 
    класса в прототипе Symbol.iterator и создал сдес функция генератор. С помощю
    вот етой логике с уield проходит for-of всем поля обекта. for-of изначально
    не опрделен его можно определит либо в прототипе object, либо в прототипе 
    нашего класса каторъй мъй описали. С циклами  for-of работает нормално, 
    дело том что в классе Number  вот етой Symbol.iterator присуствует, я таким образам 
    могу изменит порядък обхода мойему масива. 
Назад Вперед
Войдите или зарегистрируйтесь
чтобы оставить комментарий