HTML5 canvas: изучаем основные свойства, рисуем графики | HTML, CSS, JS

• Елена Литвинова объясняет, что такое канвас и его основные свойства.  

• В уроке будут рассмотрены декартова система координат и графики.  

• Используются только три файла: index.html, index.css и index.js.  

• Создается папка "канвас проджект" и добавляются файлы index.html, index.css и index.js.  

• В index.html добавляется элемент canvas с размерами 700x500 пикселей.  

• В index.css убираются лишние отступы и канвас центрируется по центру экрана.  

• В index.js определяется элемент canvas и контекст для рисования.  

• Контекст бывает двух видов: 2D и 3D.  

• В уроке используется 2D контекст для рисования графики.  

• Объясняется, что в канвасе система координат отличается от стандартной декартовой.  

• В канвасе ноль находится сверху, а увеличение идет по ширине и вниз.  

• Пример рисования прямоугольника и изменения его цвета.  

• Используется свойство move для перемещения указателя.  

• Пример рисования линии и изменения её цвета.  

• Применение свойств beginPath и endPath для разделения линий.  

• Использование свойства fillText для рисования текста.  

• Пример центрирования и изменения размера шрифта.  

• Применение свойств textAlign и textBaseline для центрирования текста.  

• Рисование сетки для ориентации в декартовой системе координат.  

• Определение ширины и высоты канваса.  

• Использование методов line для рисования вертикальных и горизонтальных линий с отступами.  

• Идем по вертикальной оси, используя метод "муфта".  

• Рисуем каждую линию с шагом скейл игрек.  

• Закрываем путь для рисования новых линий с другим цветом.  

• Определяем центральную точку по оси икс и игрек.  

• Рисуем вертикальные и горизонтальные линии.  

• Проверяем, что линии находятся по центру.  

• Изменяем скейл икс и игрек для точного центра.  

• Делим ширину канваса на скейл икс и округляем.  

• Умножаем на скейл икс и игрек для четкого сдвига.  

• Переносим переменные в начало для удобства.  

• Используем цикл для рисования подписей по оси икс.  

• Аналогично для оси игрек.  

• Задаем фон и размер текста.  

• Динамически изменяем фон в зависимости от скейл икс и игрек.  

• Подвинем цифры от осей для лучшего вида.  

• Преобразуем икс-канваса в декартову систему координат.  

• Аналогично для игрек-канваса.  

• Выводим формулы для корректного преобразования.  

• Рисуем график параболы на декартовой системе координат.  

• Используем метод "канваса фил. рект" для рисования точек.  

• Выделяем параболу красным цветом.  

• Масштабируем скейл икс и игрек для увеличения графика.  

• График становится больше и удобнее для чтения.  

• Призыв к подписке и лайкам.