Рисование на HTML5 Canvas 1. Базовые знания.

No video

Рисование на HTML5 Canvas 1. Базовые знания.

Рет қаралды 27,493

Күн бұрын

В этом видеоуроке вы узнаете как работать с притивами, нарисовать окружность, дугу, написать свой текст или вставить свой логотип на Canvas, заливать цветом и градиентом.
Ресурсы для разработчиков, от разработчиков (mozilla): developer.mozi...
Sublime Text: www.sublimetex...
Atom: atom.io/
Notepad++: notepad-plus-p...
Firefox: www.mozilla.org
Google Chrome www.google.com...
♡ Где меня найти?!
Instagram: / webgirlkristina
Twitter: / webgirlkristina
VK: webgirl...
FB: / webgirlkristina
Сотрудничество/collaboration: webgirlkristina@gmail.com
Уроки по HTML canvas:
1. Рисование на HTML5 Canvas 1. Базовые знания.: • Рисование на HTML5 Can...
2. Рисование на HTML5 Canvas 2: • Рисование на HTML5 Can...
3. Рисование на HTML5 Canvas 3. Создание анимации.: • Рисование на HTML5 Can...
Открытка на Хеллоуин с параллакс - эффектом. Рисование на HTML5 Canvas - parallax.: • Открытка на Хеллоуин с...
Адаптивная новогодняя заставка с параллакс - эффектом. HTML5 Canvas - responsive parallax.: • Адаптивная новогодняя ...
#HTML5 #JavaScript #Canvas #JS #html

Пікірлер: 98

@viktoriapoznyak1469 5 жыл бұрын

Аааа нечаянно наткнулась на твой канал, и это просто любовь с первого взгляда!! Спасибо, что ты есть, чудо))

@ievgenr.6575 5 жыл бұрын

Умничка ! Никого не слушай , благодаря тебе решил в 32 выучить html +JS и изменить свою жизнь .

@miku2293 5 жыл бұрын

получилось?

@ShosenProdukt 5 жыл бұрын

@@miku2293 за два дня?))

@miku2293 5 жыл бұрын

ну а чо тянуть?

@pavela.5245 5 жыл бұрын

Учиться программировать в 32 уже поздно. Пустая трата времени.

@miku2293 5 жыл бұрын

все свои пределы человек выставляет себе сам пусть каждый решает за себя

@meelockw.7435 5 жыл бұрын

Не важно парень или девушка, главное чтобы был контент хороший. Подписка

@ezizkurbannazarov5680 5 жыл бұрын

Здравствуйте, спасибо за ваши уроки. Хотел спросить, поможете с заданиями на JavaScript?

@glworkout 5 жыл бұрын

Музыка, речь, ценная и понятная информация. Восхитительно!)

@WebGirlKristina 5 жыл бұрын

Рада,что все понравилось)

@timberhobby 5 жыл бұрын

Кристина, спасибо Вам, продолжайте в том же духе. Скорость подачи материала, отличная. За Вами хоть можно успеть, а не тыркать то и ело на паузу.

@user-lu3lr8dv9m 3 жыл бұрын

Классно и очень интересно) Подписка однозначно!

@user-jc6pl2xj7k 2 жыл бұрын

Спасибо Кристина, хороший урок!)

@egoist2956 5 жыл бұрын

Умница! Давно искал адекватные уроки по canvas. Читая про canvas в "JavaScript. Подробное руководство" Дэвида Флэнагана, столкнулся с понятием - 'Правило ненулевого числа оборотов'. Хотел нарисовать внутри шестиугольника квадрат, что бы квадрат не заполнялся заливкой прямоугольника. Квадрат и шестиугольник являются отдельными фрагментами контура, но они перекрываются. Как не пытался воссоздать этот пример сам, без функции (приведённой в руководстве), так ничего и не получилось. Может здесь найду ответы)).

@usefulseeker6432 2 жыл бұрын

Спасибо, мне помогло!

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

Тян программист?? Круто) Подписка.

@dexagonag2194 4 жыл бұрын

СУДЯ как она пишет, сразу видно что она не прогер. Вы представляете вообще что-такое программирование? и если она будет печатать с такой скоростью то закончит проект как раз кследующему году. То как говорит и печатает говорит о том что рядом стоит второй монитор с которого все переписывает

@dexagonag2194 3 жыл бұрын

Андрей Кирин вы фигню ляпнули. Все могут включить второй монитор и просто перечитать. Когда человек знает он объясняет это на лету, так что от зубов отскакивает. Обучать должны только сеньор разработчики, но не как не мидлы и тем более не джуны

@dexagonag2194 3 жыл бұрын

Андрей Кирин знания должны стоить дорого

@dexagonag2194 3 жыл бұрын

Андрей Кирин вам бы не помешало подтянуть русский

@user-fx1wv1ry4y 3 жыл бұрын

Ё,я благодарен ей за это,для меня это философия

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

Странно, но почему-то не получилось отобразить картинку данным методом, хотя все перепроверил - Выяснилось что в Google Chrome надо немного пошаманить - this.onload = function(){ context.drawImage(img, 50, 50); } вместо context.drawImage(img,50,50);

@WebGirlKristina 5 жыл бұрын

Это не из- за браузера конретно, просто у тебя не успела загрузится картинка. Если картинка статична через img, то достаточно запускать скрипт через document.onload, а если картинка динамически подгружается в js, то onload на саму картинку. Я об этом рассказываю в следующих уроках.

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

@@WebGirlKristina ок, благодарю!

@egoist2956 5 жыл бұрын

Лайк!

@tovjukov 5 жыл бұрын

Будем поглядеть!!! Подписка.

@rostislavradionov9311 5 жыл бұрын

Спасибо! хотелось бы узнать о музыке , которая играет в начале ролика)

@digitalturkistan1857 5 жыл бұрын

Все мужики поставили лайк. наверное все восторге включая меня

@yarik83men51 4 жыл бұрын

Спасибо. Умничка, делится инфой, очень благородно. Успехов. Я так понял работаете в среде Linux, очень смелая девушка.

@dispetcher_ 4 жыл бұрын

Вряд ли смелая, хотя конечно не знаю, но в данном случае у человека просто наличествует талант и ему надо искать занятия - в веб разработке, дизайне. Я ещё давно заметил, чем человек талантливее, тем он смелее там, где у него способность заниматься таким делом. Поэтому бездарные люди от природы(талантливым можно только родиться, все разговоры, что талант нужно найти - чушь, он проявляется вне зависимости от воли человека, вернее сказать, он просто будет хотеть это делать, как нечто естественное для себя, потому как в человеке есть талант) замечают смелость в каких-то действиях людей(без обид, я сам бездарь)

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

Топчик, больше контента

@karimovarsen7986 5 жыл бұрын

Продолжай пилить видосы!! Жду Js ))

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

Боже, какая же ты красивая и твой голос, ммммммммм)))))

@PavelAlexeev-super 4 ай бұрын

Ах, Кристина, почто ты перестала видео делать??😢

@viktorviktor6145 Жыл бұрын

Прикольно. А можно ли с работой с canvav в HTML вставлять всякие теги, и редактировать их в CSS? Ну например вставить картинки, и установить им z-index?

@amoral3 5 жыл бұрын

А ты где работаешь, в какой компании? На каком уровне знания JS находишься?

@marpaxr3986 2 жыл бұрын

Привет! Не могу вспомнить что трек? Очзнакомая музыка, но кто точно не могу вспомнить... Подскажешь?)

@sergiygudym4854 5 жыл бұрын

Можно поскорее уроки?) Пожалуйста)

@romasurov1644 3 жыл бұрын

мучение так рисовать ,легче на флеше за секунды делать тоже самое

@ndrewhas 4 жыл бұрын

Привет, годный контент, подписался. Как можно залить канвас с эффектом динамичной волны (типа как краску разлили на столе)? Волна стекает сверху вниз, чтобы при этом происходила инверсия цвета шрифтов на странице? Я нашел небольшую библиотечку, но пока не разобрался как имнно она работает. И инверсии цвета шрифта там нет. Буду бесконечно благодарен, если подскажешь, спасибо)

@MrMaftoul 5 жыл бұрын

Я так полагаю, уроков для начинающих по html уже не будет? :)

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

Спасибо, скорость хорошая, быстрее не надо

@zubziro5566 5 жыл бұрын

Немного по девчачьи конечно. Но контент хороший. Продолжайте пилить годный контент!!!

@igorgamf4273 5 жыл бұрын

kde cool!

@AndrewDevUA 5 жыл бұрын

музыка найс! крутой урок! Можно ссылку на музыку)

@AndrewDevUA 5 жыл бұрын

так как на счет хотя бы названия музыки? а то шазам ее не узнает)

@banshotenin499 3 жыл бұрын

А не легче в css делать?

@esequielerick6547 5 жыл бұрын

Ты девушка красивая , ( buen tutorial saludos de Perú )

@fudj8264 5 жыл бұрын

ты смой с нее всю штукатурку и увидим настоящее лицо "красавицы"

@PavelAlexeev-super 4 жыл бұрын

А где новые видео?

@immanuelkant9290 5 жыл бұрын

За 2 года работы в фулстеке ниразу не пригодился канвас, он вообще используется в бизнесе?

@WebGirlKristina 5 жыл бұрын

Смотря в какой сфере. В интернет- магазинах вряд ли, а вот мелкие браузерные игры например для соц. сетей вполне, тем более что флеш умер.

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

Не люмен на фоне играет?

@StailWindizla 5 жыл бұрын

а почему не используешь Vscode ?

@azh374 5 жыл бұрын

Что такое "притивы" ? Может правильно примитивы ?

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

А чего это за справочник по js , который в окне браузера появляется ?

@scimon3259 5 жыл бұрын

Называется "Видеомонтаж" )

@klasterdev154 5 жыл бұрын

Воу, KDE, а какой дистрибутив?

@ACIDbtc 5 жыл бұрын

что бы сделат красный квадрат? долго капец

@MrStealthWarrior 5 жыл бұрын

Квадрат это просто демонстрация.

@ACIDbtc 5 жыл бұрын

@@MrStealthWarrior и чё дальше я бухой и накурен раскажи подрообнее

@MrStealthWarrior 5 жыл бұрын

@@ACIDbtc Посмотри дальнейшие ролики из серии про Canvas.

@yuriimudryi5185 5 жыл бұрын

Лайк за кеды!

@erlanerlan7739 5 жыл бұрын

у тебя какая ОС если не секрет. просто на видео не смог распознать

@en_li_85 5 жыл бұрын

ubuntu это

@omxian408 5 жыл бұрын

или Kubuntu, или KDE Neon :)

@tigranvardanyan5044 5 жыл бұрын

почему она так неестественно говорит? будто текст читает

@MrStealthWarrior 5 жыл бұрын

Как по мне - всё хорошо. Возможно и правда читает заготовленный заранее текст. И это скорее плюс. Т.к. пояснение идет простым и понятным языком, всё по порядку, разложено по полочкам и без темных моментов, которые слушатель должен либо знать заранее, либо искать сам.

@user_404_not_found 5 жыл бұрын

Просто бесчувственный технарь, это нормально. Человек не гуманитарное образование получал.

@headtail5383 5 жыл бұрын

Потому что она, по всей видимости, читает текст.

@MAIVSHOW 5 жыл бұрын

Кристи, какое у тебя образование ?)

@vlad_furmanov 5 жыл бұрын

Где уроки?

@romanfanta6347 5 жыл бұрын

В функции не 'параметры' а 'аргументы'....

@WebGirlKristina 5 жыл бұрын

В функции как раз параметры, а аргумент это то, что вне функции , и мы передаем в функцию как параметр. По сути аргумент - это фактический параметр.

@duho3avr745 5 жыл бұрын

Что за ОС у тебя ?

@andriiyurchuk3299 5 жыл бұрын

Вопросс. Нахрен этот Canvas вообще нужен?

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

Такая тягомотина. Можешь одновременно говорить и делать?

@mikhailivlev 5 жыл бұрын

ну я на скорости х1.5 смотрю и вроде терпимо получается, даже не так бесит отсутствие Еммета в работе...

@MrStealthWarrior 5 жыл бұрын

Единственное, что стоило бы изменить - быстрее вводить код немного. Само объяснение вполне хорошо сделано. Нужно понимать, что это контент не исключительно для тебя. Кто-то знает меньше - им будет идеально если больше подробностей и не торопится оратор никуда.