HTML5 canvas: изучаем основные свойства, рисуем графики | HTML, CSS, JS
В видео узнаем, что такое canvas, как использовать свойства рисования в нём и научитесь рисовать графики без библиотек.
🍀 Поддержать канал: www.donationalerts.com/r/webe...
☕️ Купить кофе: buy.stripe.com/5kA7sL9574SG7x...
🎨 Купить набор кистей Procreate: webelart.com/illustration.
✍️ Мой telegram channel: t.me/webelart
🏰 Английский KZread: @webelart_en
💁🏼♀️ Инстаграм: / webelart
🦄 LinkedIn: / webelart
Демо + исходники: webelart.com/lessons/canvas_g....
00:00 введение
00:48 что такое html5 canvas?
01:18 создаём проект, добавляем canvas и стилизуем
03:18 различие контекстов 2d и 3d
03:39 система координат canvas
04:30 рисуем прямоугольники на canvas
05:23 рисуем линии на canvas
06:56 работаем с текстом
08:21 ставим задачу для создания графика
09:05 рисуем сетку
11:52 рисуем главные оси декартовой системы
14:20 добавляем цифры и подписи к осям
17:39 рисуем график
20:20 экспериментируем с разными графиками
21:12 заключение
Из этого видео вы узнаете:
⭐️ Что такое HTML5 canvas.
⭐️ Различие 2d и 3d рисования на canvas.
⭐️ Про систему координат canvas.
⭐️ Как добавлять прямоугольники, линии и текст на canvas.
⭐️ Рисовать декартову систему координат с графиками на ней.
☃️Рекомендую посмотреть:
⭐️ Сброс и нормализация стилей, вёрстка с нуля | HTML, CSS - • Урок 3. Сброс и нормал...
⭐️ Единицы измерения CSS: px, em, rem, %, vw, vh, vmin, vmax, ex, ch - • Урок 2. Единицы измере...
⭐️ Что такое CSS - • Урок 1. Что такое CSS?...
⭐️ Уроки по HTML - • Основы HTML
⭐️ Всё что нужно знать про интернет - • Знакомство с Интернет ...
На канале я рассматриваю различные темы веб-разработки, на текущий момент: веб-основы, веб-анимации, веб-дизайн.
Пікірлер: 31
Очень понятно и особенно важно - в темпе рассказано, без долгих рассуждений. Спасибо. Было очень полезно.
Это лучший урок по канвас, который я видел. Умничка продолжай дальше)
@webelart
3 жыл бұрын
Спасибо! ❤️
Лен, как всегда, очень доходчиво о сложном! 🙌🤩
оч круто, надеюсь будут еще видео о canvas)) я бы прям курс прошел
Классный материал, без лишней воды
Реально, спасибо большое!! Теперь считай с canvas работал ))
благодарю! все очень наглядно и понятно! Спасибо!
@webelart
2 жыл бұрын
😘
Спасибо огромное! Все понятно и ясно. Помогли сделать домашку :)
Почему вам нельзя поставить 100 лайков? Огромное спасибо за урок!!!
Спасибо за ролик, было интересно. Не много конструктива: 1. Статические константы именуются капсом - const SOME_VALUE = 1; 2. Чуть более понятно называть переменные, например scaleX -> cellXWidth, xAxis -> xAxisCenter
@webelart
2 жыл бұрын
Спасибо за просмотр! 😘 Спасибо большое и за конструктив. Ох уж это именование, отдельная наука вообще! 😂 Вы бы знали как я именовала переменные в начале своей карьеры, пожалуй мои переменные поднимали настроение всей команде. До сих пор с пристрастием к ним подхожу! 😍🥰 Про капслоки обычно подхожу к этому с долей пофигизма, особенно в проектах, которые на быструю руку накидываю. Если проект серьезный и большой, то там уже вступают линтеры и прочие соглашения по команде.
ИНтересная подача материала, приятно слушать, вся суть излагается довольно быстро
@webelart
3 жыл бұрын
Спасибо!
Лайк умнице!!)
😍
Отличный урок! Хотелось бы узнать как создавать графики с помощью svg
Очень поравился урок, но у меня не получилось задать цвет и рисования, хотя я делала, все как в уроке. В чем может быть проблема?
@webelart
2 жыл бұрын
Спасибо! Скиньте ваш файл на hello@webelart.com и напишите, какой цвет не получилось задать, посмотрю по возможности и отвечу. Так сложно понять дистанционно.
Почему вы не пользуетесь Emmet?
@webelart
3 жыл бұрын
Люблю печать 🙃
! + tab - создает основную структуру HTML документа.
Uncaught TypeError: Cannot read property 'getContext' off null at main.js:2 в консоле пишет, вторая строка это var ctx = cvs.getContext("2d"); помогите пожалуйста!
@webelart
3 жыл бұрын
cvs переменная не определена. Как происходит определение cvs, что в нём лежит?
@toadsk8289
3 жыл бұрын
@@webelart var cvs = document.getElementById("canvas");
@toadsk8289
3 жыл бұрын
@@webelart первую строку я написал, в чем проблема?!
@webelart
3 жыл бұрын
@@toadsk8289 как выглядит html и определение
@toadsk8289
2 жыл бұрын
Заголовок страницы