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

Canvas и Анимации

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


 

Назад Вперед
Войдите или зарегистрируйтесь
чтобы оставить комментарий