Учим HTML5 Canvas за 30 минут!
Изучаем работу с HTML5 Canvas и уже сходу пишем что-то настоящее.
В уроке будет работа с примитивами, работа с текстом, с градиентом, с анимацией, а также многое другое.
В целом весело и легко =)
=
💗 🤟 👊 Участвовать в интенсиве по JS: wep.wf/daaldi
=
🆇 Ссылки из видео 🆇
𝟭: Всё по Canvas www.w3schools.com/tags/ref_ca...
Наш паблик: howdyho_net
Наш телеграм: t.me/howdyho
Сотрудничество topic-84392011_33285530
💗 Музыка предоставлена KZread Audio Library.
Пікірлер: 318
Хорошая подача урока, сжато и четко. Для понимания вектора развития очень подойдет. Однозначно лайк.
Хауди, спасибо тебе большое за твою работу.. Очень мотивируешь и просто в кайф смотреть твои видео)
@HowdyhoNet
6 жыл бұрын
Стараемс
Спасибки! Это были продуктивные полутора часа просмотра и практики =)
куча положительных эмоций! спасибо!))
Блин, как же я хотел этого видео и тут БАЦ, канвас за 30 минут=) Спасибо Хауди!=)
@HowdyhoNet
6 жыл бұрын
Рад помочь!)
@ogurchek9366
4 жыл бұрын
@@HowdyhoNet а как сдєлать штоб круг рисовался при простом нажатиє? линия вєдьотс а круг сам не рисуется. Я не руский. Извините за не грамотность
@ilnev3738
4 жыл бұрын
@@ogurchek9366 он показывал в видео
Ты очень крутой программист, я уже давно смотрю тебя и многому научился, по больше таких поучительных видео только порадует твоих подписчиков. 👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👏👏👏👏👏👏👏👏👏👏👏👏🏼👏🏼👏🏼👏🏼
Жаль что нельзя поставить несколько лайков. Урок гораздо лучше чем многие аналоги на Ютубе. Спасибо!
Годнота! Спасибо)
Как всегда видео на высшем уровне)
Спасибо за то, что делаешь такие познавательные уроки. Благодаря твоим видео, у меня появляется мотивация на изучение языка. Спасибо!
@HowdyhoNet
6 жыл бұрын
Рад помочь
@MegaDragon1112
3 жыл бұрын
@@synthesisone2787 Да, прошелся по HTML/CSS/JavaScript/PHP/Mysql, сейчас всё закрепляю практикой параллельно изучая WordPress
@swokko88
3 жыл бұрын
@@MegaDragon1112 а Python?)
@user-jw1pc9ls1x
3 жыл бұрын
@@swokko88 зачем, если он php выучил, я вообще буду node js учить, хотя он не легкий, но я чисто по js иду
@swokko88
3 жыл бұрын
@@user-jw1pc9ls1x я рофлю И NodeJS легче обычного JS
Я прям почувствовал как Хауди чувствует себя в js. Как масло в сыре!
Всё просто и понятно, спасибо Хауди
Отличное видео! Спасибо!
@HowdyhoNet
6 жыл бұрын
Рад помочь
Огромное спасибо за урок!
Спасибо!Очень позгавателен ,пасиб)
Спасибо, очень полезное видео!
Очень крутое и полезное видео от Хауди-хо!!!!!!!! Ставлю лайк!!!!!!
Спасибо большое за урок!
Так вот как эта штука работает, спасибо, хауди!
Большое спасибо!!!
Ты просто БОГ!
Посмотрел....Теперь играю не в игры а в HTML
@ruslanundefined2242
2 жыл бұрын
Хаха лучший
спасибо, ваше видео мне помогло в изучении html!!!
Спасибо за труд
ты мой кумир🎈
Привет, Хауди! Спасибо тебе за полезный контент :) Не думал ли ты снять видео о XML, XSL и т.п. языках?
@HowdyhoNet
6 жыл бұрын
Нет, пока в планах нет таких уроков.
Как же у меня горит жопа!! Это очень классная обучалка и вообще я люблю этот канал, тк здесь приятная подача материала, но нельзя так быстро объяснять! Я смотрел этот видос часа 2 и за это время я посмотрел только 20 минут! Надо делать всё медленнее, чтобы человек, который пытается что-то выучить успевал за тобой😁
@user-hc5ul3ds5u
4 жыл бұрын
0.75 мужик, 0.75...
@NikolajSafarov
Жыл бұрын
@@user-hc5ul3ds5u ?
Хауди, привет! Есть в планах продолжать уроки по kivy Python? Или пока вдохновения для питона нет ?)
За видео спасибо, давно пытался и бросил писать "Paint", т.к. не нашёл самостоятельно решения как избавиться от этих gap'ов. Есть вопрос: в чём разница на что вешать обработчик событий клавиатуры: на document или window?
лутчший урок по canvas, что видел!!!
Очень круто!
Ты за 11 минут рассказал больше чем я за пол года уча java script
спасибо за урок!
Очень крутой и полезный видос. Спасибо!
У меня есть такое правило: если дело касается видео *Хауди ХО*- тогда вначале ЛАЙК, а потом просмотр 😏
Спасибо!
Спасибо )
*ты каждый день мати вируешь меня спасибо огромное XD **#Хауди*
Продолжение !)
Ого, реклама Ивана Петреченко, я у него когда то учился, теперь работаю))
а все это можнл реализовать на Jquery? Или ванильный js оптимален для canvas?за видео лайк
Круто!
божественное произношение англ...
Cпасибо! Вопрос: как мне сделать изменять background-image на файл, выбранный юзером?
Продолжение будет по Kivy?
Если кому-то лень писать ручками, а похвастаться хочется то вот: Painter 1.0 Sorry, U mad bro.. var canv = document.getElementById('canvas'), ctx = canv.getContext('2d'), isMouseDown = false, coords = []; canv.width = window.innerWidth; canv.height = window.innerHeight; // Code canv.addEventListener('mousedown', function(){ isMouseDown = true; }); canv.addEventListener('mouseup', function(){ isMouseDown = false; ctx.beginPath(); coords.push('mouseup'); }); ctx.lineWidth = 10 * 2; canv.addEventListener('mousemove', function (e){ if( isMouseDown ) { coords.push([e.clientX, e.clientY]); ctx.lineTo(e.clientX, e.clientY); ctx.stroke(); ctx.beginPath(); ctx.arc(e.clientX, e.clientY, 10, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.moveTo(e.clientX, e.clientY); } }); function save (){ localStorage.setItem('coords', JSON.stringify(coords)); } function clear (){ ctx.fillStyle = 'white'; ctx.fillRect(0, 0, canv.width, canv.height); ctx.beginPath(); ctx.fillStyle = '#000'; } function replay (){ var timer = setInterval(function (){ if( !coords.length ) { clearInterval(timer); ctx.beginPath(); return; } var crd = coords.shift(), e = { clientX: crd["0"], clientY: crd["1"] }; ctx.lineTo(e.clientX, e.clientY); ctx.stroke(); ctx.beginPath(); ctx.arc(e.clientX, e.clientY, 10, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.moveTo(e.clientX, e.clientY); }, 20); } document.addEventListener('keydown', function(e){ if( e.keyCode == 83) { // save save(); console.log('Saved'); } if( e.keyCode == 82) { // replay console.log('Replaying...'); coords = JSON.parse(localStorage.getItem('coords')); clear(); replay(); } if( e.keyCode == 67) { // clear clear(); console.log('Cleared'); } }); :-)
@salievb1598
5 жыл бұрын
Спс
@cosmicbeetle382
5 жыл бұрын
Спасибо!!!
А будет видео по созданию диаграмм JS или SVG?
Хауди делай больше видеуроков по языкам,но за час
Привет, Хауди! Будет ли серия уроков во JS DOM? Есть на англиском, но на русском ничего адекватного не нашел. Ты - лучший прогграмист на рутубе!)
@sergiynimerovsky1917
6 жыл бұрын
learn.javascript.ru, только здесь можно отлично выучить язык! (Хауди рекомендует)
Спасибо Абрахам!) Ты меня надоумил воспользоваться сеопультом) Дали 500руб. даже не используя код "хо" 👍
@HowdyhoNet
6 жыл бұрын
=)
@max_mgtow
6 жыл бұрын
Хауди а через какое время запрос ВЧ будет в топе? Через 2 месяца или полгода? И не кинет ли Google в бан за ссылки?)
@HowdyhoNet
6 жыл бұрын
Надо пользоваться аккуратно, я где-то говорил, что больше 5-10% бюджета на ссылки лучше не отдавать. Когда он окажется в топе тебе могут сказать в поддержке SeoPult. Главное пользуйся осторожно.
Спасибо
спасибо!
Интересно. По простому хочу сказать что пытаюсь сделать - хочу сделать холст, на который можно перетаскиванием размещать предметы. Как понимаю можно фото превратить в объекты и двигать их на холсте. А вот еще хочу спросить - как задать масштаб и сетку-линейку есть ли такие инструменты?
Нихуя не понял, но очень интересно P.S Ну понял немного, но только из знаний в англиском языке.
@user-lm1rb6xv6z
4 жыл бұрын
Dede +
@artwell8703
4 жыл бұрын
HTML, CSS и JavaScript Надо знать
очищать экран лучше так ctx.clearRect(0,0,w,h) вместо ctx.fillStyle = 'white' ctx.fillRect(0,0,w,h)
@bogdan_ov
5 жыл бұрын
Конечно! Кого он учит!!?
@jamesflanders994
4 жыл бұрын
@@bogdan_ov Людей. По крайней мере с виду.
Сможешь сделать видео про grid layout
Top!
На 18-й секунде эффектно
*классный урок, а те кто хотят по серьёзнее освоить канвас, и вообще js, то советую прочитать книгу - javascript для самых маленьких, очень интересная книга, не пожалеете потраченного времени;) Хауди, ставь лайк, если читал эту книгу :)))*
@Max-kr4ie
5 жыл бұрын
Спасибо ушел читать) надеюсь ты жив здоров.
Хауди, привет! Рисовалка на канве, это конечно хорошо.. но что, если дело касается взаимодействия с нарисованными элементами?) Как ловить на них события мыши? Есть библиотека Kanva кажется, там есть такой функционал, можно создавать layers и ловить на них события. А если без библиотеки? Если использовать svg, то это выходит проще.
@HowdyhoNet
6 жыл бұрын
Простые расчеты от e.offsetX, как и в любых граф. приложениях.
Привет автор, ответь пожалуйста, реально ли с помощью канваса рисовать картинку на компе и отправлять на сервер и она будет уникальной, то есть индентифицировать пользователя?
За песню из мема кот носок лайк)
отличный канал, всё информативно, простыми словами, и какие-либо вопросы остаются достаточно редко. только 19.43 насчет градиента правильно ли я всё понял: в заливке "hello world" виден переход с magenta на blue, но никакого red. - это из-за того, что у нас в определении grad в функцию createLinearGradient третьим аргументом поступает 500? то есть, мы бы увидели красный цвет в тексте, если бы он был подлиннее (или если бы вместо 500 было число поменьше), верно ?
@HowdyhoNet
6 жыл бұрын
Верно
Пожалуйста сделай урок по Bootstrap 4🙏
@MrAmir991
6 жыл бұрын
У WebDesign Master есть урок
@user-xtkjdtr16
5 жыл бұрын
У Гоши Дударя есть такой урок.
@newview8925
4 жыл бұрын
У it doctor есть хорошие уроки
Хорошо учишь по делу! у меня есть вопрос:для мобильных сайтов критичны ru com net? или можно выбрать более бесплатные? q?m?
@HowdyhoNet
6 жыл бұрын
Это вопрос больше по SEO. Насколько я знаю - доменная зона не влияет на продвижение, если это не домен второго уровня (co.uk) и если это не труднодоступная доменная зона (de,fr и тд). Но, могу в чём-то ошибаться.
Было бы шик делать текстовые версии на сайте. Читать как то удобнее
Я выучил за 30 минут ! Спасибо ! Мне всего лишь пришлось изучить много чего(опустим подробности), потом я стал опытным разработчиком через 15 лет я стал профи, после изобрели машину времени, доллар обесценился, биткоин развалился, путина избрали на 17 срок, после заморозки медведева. Теперь я вернулся из будущего Сеньором и выгнал себя который сейчас в прошлое что бы изобрести Эпл, если чего пишите помогу советом, я же теперь миллиардер и мне ничего не надо делать, у меня много свободного времени.
@michaelqi6985
6 жыл бұрын
Что сделать, что бы через час у меня было 1000$?
@user-fo8bg3wp8c
6 жыл бұрын
Значит можно взять кредит.
@user-tl8gp4uh7v
6 жыл бұрын
что ты куришь?
@_dyats
6 жыл бұрын
Эээээ, чё ты врешь людям Путин был только 13 сроков(и то это уже его "двойники", потому что первый умер 2 года после первого срока), ты походу был в паралельной реальности-_-, смотри мне тут, как бы временно-просторовый континиум не взорвался, ато тогда всем жопа
@user-fo8bg3wp8c
6 жыл бұрын
Курю сигареты Treasurer
Хей Хауди Хо ты какои тип прогромирования учил или ещё учиши?
Круто
Хорошая видео
Отличный урок! Но есть вопрос, который мучает меня, как это работает на 31:12 ? у меня с crd не работает, переписал так var e = { clientX: coords.shift(), clientY: coords.shift() }; и все заработало. Не знаю может это какое-то глобальное обновление в JS 😕
Вишенка на торте хайпа
Интересно. А относительно какой точки треугольник повернулся?
@ICruciall
3 жыл бұрын
Наверно на пересечении серединных перпендикуляров
нарисовал канву как сделать чтобы она отображалась вместо background который дублирует текстуру (repeating), на этом эелементе в виде альфа наложения (частицы) хотелось бы вывести в конву и смешивать, а всё остальное поверх (элементы сайта), а то у меня канва рисуется поверх всего... или замещает bacground или если мудрить тормозит, т.к. все тело сайта с полупрозрачностями :)
вопросик, а зачем 27:00 вообще нужно функция clear, если при клике на KeyS можно написать => ctx.clearRect(0, 0, canv.width, canv.height), все так же работает у меня
здравствуй хауди хо у меня при работе с скриптом replaying выходит ошибка(html5.html:56 Uncaught TypeError: Cannot read property 'length' of null at html5.html:56) помоги пожалуйста
Я вас прошу посоветовать приложение для изучения языков програмирывания на безе IOS
топ урок
Хауди Можешь Сделать уроки по CSS3
Хауди, почему забросил такие уроки??? обидно....
Здравствуйте, столкнулся с такой проблемой: при написании подобного кода выдает ошибку, мол не может выполнить getContext, т.к. canv = null. Но при написании строки $('document').ready(function(){ //код }); все отлично работает. Автор канала не использует эту команду, но у него все работает. Что не так с моим Chrome?
Эти промежутки между шарами появляются если частота опроса мыши маленькая. При 1000 почти нормально рисуется. на 125 большие промежутки.
Из этого видео я понял, почему в пэинт линяя закругленная.
Как картинки загружать канвасом? Не одну, а несколько, для создания коллажа?
Как сделать изображение на весь экран и поверх накладывать изображения с анимацией ??
0:40 старый ... эксплорер версии 9.. ХА!!! я еще IE 5.5 помню.. и Милениум
Зачем нам Иван Петриченко, когда у нас есть ты?)
Спасибо за видео! Встала задача поворачивать треугольник по оси Y, как это можно сделать? Обычно все видео о том как повернуть ту или иную фигуру по часовой стрелке, а как ее поворачивать в другой плоскости нет(
@nikoghosyann
4 жыл бұрын
просто пиши - в начале цифры!
Я чё то маленько потерялся. corse.push() - добавили тупо любой текст, в итоге при очередном вырезании shift получает этот текст, закидывает в объект на один элемент clientX: crd[ 0 ] второй clientY: crd[ 1 ] пустой остаётся и дальнейшие действия не прокатывают из-за несуразицы кода поэтому и не дорисовывает линии. Я так понимаю? Или я упустил глубокий смысл текста в push
ClearRect() тоже пойдет?
А как задать неск цветов подскажите пж !задаю вроде получается а вот когда идет replay лини окрашиваются а вот круги черные !
Спасибо за уроки Если сможете подскажите в коде ниже где косяк? Не выводит текст Привет Not is work var canv = document.getElementById("canvas"); var ctx = canv.getContext("2d"); canv.width = window.innerWidth; canv.height = window.innerHeight; //Code grad = ctx.createLinearGradient(0,0,500,0); grad.addColorStop('0','black'); grad.addColorStop('.50','blue'); grad.addColorStop('1','red'); ctx.fillStyle = grad; ctx.textAlign = "center"; ctx.font = "30px Georgia"; ctx.fillText= ("Hellodsfsdfsdf", 50, 70);
Почему используется манипуляция с fillRect() и белым цветом, вместо того, чтобы сделать clearRect(0,0,canv.width,canv.height)?
Как залить эту игру, допустим в вк?
А где покопать про вращающийся автомат?
Интересный урок. А есть возможность этот рисунок сохранить в видео?
@akish4628
5 жыл бұрын
В теории, - да, а на практике это довольно сложно.
хоть я ни бум бум в программировании, но было очень интересно! что здесь является языком программирования: канвас или джаваскрипт?
@HowdyhoNet
7 ай бұрын
Второе.
180 - like ; 0 - dislike
Я обрыл весь ютуб и наконец я нашёл (я хочу создать игру в которой надо уварачиваться от пуль)
Сделал все как показано в видео, но фигура не рисуется