Учим HTML5 Canvas за 30 минут!
HTML-код
- Опубликовано: 12 сен 2024
- Изучаем работу с HTML5 Canvas и уже сходу пишем что-то настоящее.
В уроке будет работа с примитивами, работа с текстом, с градиентом, с анимацией, а также многое другое.
В целом весело и легко =)
=
💗 🤟 👊 Участвовать в интенсиве по JS: wep.wf/daaldi
=
🆇 Ссылки из видео 🆇
𝟭: Всё по Canvas www.w3schools....
Наш паблик: how...
Наш телеграм: t.me/howdyho
Сотрудничество topic-8...
💗 Музыка предоставлена RUclips Audio Library.
Блин, как же я хотел этого видео и тут БАЦ, канвас за 30 минут=) Спасибо Хауди!=)
Рад помочь!)
@@HowdyhoNet а как сдєлать штоб круг рисовался при простом нажатиє? линия вєдьотс а круг сам не рисуется. Я не руский. Извините за не грамотность
@@ogurchek9366 он показывал в видео
Спасибо за то, что делаешь такие познавательные уроки. Благодаря твоим видео, у меня появляется мотивация на изучение языка. Спасибо!
Рад помочь
@@synthesisone2787 Да, прошелся по HTML/CSS/JavaScript/PHP/Mysql, сейчас всё закрепляю практикой параллельно изучая WordPress
@@MegaDragon1112 а Python?)
@@swokko88 зачем, если он php выучил, я вообще буду node js учить, хотя он не легкий, но я чисто по js иду
@@user-jw1pc9ls1x я рофлю
И NodeJS легче обычного JS
Хорошая подача урока, сжато и четко. Для понимания вектора развития очень подойдет. Однозначно лайк.
Я прям почувствовал как Хауди чувствует себя в js. Как масло в сыре!
Ты очень крутой программист, я уже давно смотрю тебя и многому научился, по больше таких поучительных видео только порадует твоих подписчиков. 👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👏👏👏👏👏👏👏👏👏👏👏👏🏼👏🏼👏🏼👏🏼
Жаль что нельзя поставить несколько лайков. Урок гораздо лучше чем многие аналоги на Ютубе. Спасибо!
Хауди, спасибо тебе большое за твою работу.. Очень мотивируешь и просто в кайф смотреть твои видео)
Стараемс
Спасибки! Это были продуктивные полутора часа просмотра и практики =)
Посмотрел....Теперь играю не в игры а в HTML
Хаха лучший
Как же у меня горит жопа!!
Это очень классная обучалка и вообще я люблю этот канал, тк здесь приятная подача материала, но нельзя так быстро объяснять!
Я смотрел этот видос часа 2 и за это время я посмотрел только 20 минут!
Надо делать всё медленнее, чтобы человек, который пытается что-то выучить успевал за тобой😁
0.75 мужик, 0.75...
@@user-hc5ul3ds5u ?
Если кому-то лень писать ручками, а похвастаться хочется то вот:
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');
}
});
:-)
Спс
Спасибо!!!
У меня есть такое правило: если дело касается видео *Хауди ХО*- тогда вначале ЛАЙК, а потом просмотр 😏
очищать экран лучше так ctx.clearRect(0,0,w,h)
вместо
ctx.fillStyle = 'white'
ctx.fillRect(0,0,w,h)
Конечно! Кого он учит!!?
@@bogdan_ov Людей. По крайней мере с виду.
Пожалуйста сделай урок по Bootstrap 4🙏
У WebDesign Master есть урок
У Гоши Дударя есть такой урок.
У it doctor есть хорошие уроки
куча положительных эмоций! спасибо!))
Нихуя не понял, но очень интересно
P.S Ну понял немного, но только из знаний в англиском языке.
Dede +
HTML, CSS и JavaScript Надо знать
а все это можнл реализовать на Jquery? Или ванильный js оптимален для canvas?за видео лайк
*классный урок, а те кто хотят по серьёзнее освоить канвас, и вообще js, то советую прочитать книгу - javascript для самых маленьких, очень интересная книга, не пожалеете потраченного времени;)
Хауди, ставь лайк, если читал эту книгу :)))*
Спасибо ушел читать) надеюсь ты жив здоров.
За видео спасибо, давно пытался и бросил писать "Paint", т.к. не нашёл самостоятельно решения как избавиться от этих gap'ов.
Есть вопрос: в чём разница на что вешать обработчик событий клавиатуры: на document или window?
Годнота! Спасибо)
Я выучил за 30 минут ! Спасибо ! Мне всего лишь пришлось изучить много чего(опустим подробности), потом я стал опытным разработчиком через 15 лет я стал профи, после изобрели машину времени, доллар обесценился, биткоин развалился, путина избрали на 17 срок, после заморозки медведева. Теперь я вернулся из будущего Сеньором и выгнал себя который сейчас в прошлое что бы изобрести Эпл, если чего пишите помогу советом, я же теперь миллиардер и мне ничего не надо делать, у меня много свободного времени.
Что сделать, что бы через час у меня было 1000$?
Значит можно взять кредит.
что ты куришь?
Эээээ, чё ты врешь людям Путин был только 13 сроков(и то это уже его "двойники", потому что первый умер 2 года после первого срока), ты походу был в паралельной реальности-_-, смотри мне тут, как бы временно-просторовый континиум не взорвался, ато тогда всем жопа
Курю сигареты Treasurer
Хауди, привет! Есть в планах продолжать уроки по kivy Python? Или пока вдохновения для питона нет ?)
Как всегда видео на высшем уровне)
Привет, Хауди! Спасибо тебе за полезный контент :) Не думал ли ты снять видео о XML, XSL и т.п. языках?
Нет, пока в планах нет таких уроков.
Всё просто и понятно, спасибо Хауди
Ты за 11 минут рассказал больше чем я за пол года уча java script
Очень крутое и полезное видео от Хауди-хо!!!!!!!! Ставлю лайк!!!!!!
ты мой кумир🎈
Хм...
Гоша Дударь...
Хауди Хо...
Гоша Хо...?
Хауди Дударь...?
Хм...
Ивангай...
Марьяна Ро...
Иван Ро...?
Марьгай...?
ару
Рамиль
у тебя на автарке ТЫ, после написания коммента.
@@Liventer Хм...
Хауди Хо...
Гоша Дударь...
Марьяна Ро...
Ивангай...
Хауди Ро.
Гоша гай.
Марьяна Дударь.
Иван Хо!
Гошауди, Хаоша
Ого, реклама Ивана Петреченко, я у него когда то учился, теперь работаю))
Интересно. А относительно какой точки треугольник повернулся?
Наверно на пересечении серединных перпендикуляров
спасибо, ваше видео мне помогло в изучении html!!!
Отличное видео! Спасибо!
Рад помочь
Привет, Хауди! Будет ли серия уроков во JS DOM? Есть на англиском, но на русском ничего адекватного не нашел. Ты - лучший прогграмист на рутубе!)
learn.javascript.ru, только здесь можно отлично выучить язык! (Хауди рекомендует)
здравствуй хауди хо
у меня при работе с скриптом replaying выходит ошибка(html5.html:56 Uncaught TypeError: Cannot read property 'length' of null
at html5.html:56) помоги пожалуйста
Продолжение будет по Kivy?
Так вот как эта штука работает, спасибо, хауди!
Огромное спасибо за урок!
Спасибо большое за урок!
*ты каждый день мати вируешь меня спасибо огромное XD **#Хауди*
Спасибо, очень полезное видео!
Ты просто БОГ!
Вишенка на торте хайпа
отличный канал, всё информативно, простыми словами, и какие-либо вопросы остаются достаточно редко.
только 19.43 насчет градиента правильно ли я всё понял:
в заливке "hello world" виден переход с magenta на blue, но никакого red. - это из-за того, что у нас в определении grad в функцию createLinearGradient третьим аргументом поступает 500? то есть, мы бы увидели красный цвет в тексте, если бы он был подлиннее (или если бы вместо 500 было число поменьше), верно ?
Верно
Спасибо Абрахам!) Ты меня надоумил воспользоваться сеопультом) Дали 500руб. даже не используя код "хо" 👍
=)
Хауди а через какое время запрос ВЧ будет в топе? Через 2 месяца или полгода? И не кинет ли Google в бан за ссылки?)
Надо пользоваться аккуратно, я где-то говорил, что больше 5-10% бюджета на ссылки лучше не отдавать.
Когда он окажется в топе тебе могут сказать в поддержке SeoPult.
Главное пользуйся осторожно.
Спасибо!Очень позгавателен ,пасиб)
Большое спасибо!!!
Хорошо учишь по делу! у меня есть вопрос:для мобильных сайтов критичны ru com net? или можно выбрать более бесплатные? q?m?
Это вопрос больше по SEO.
Насколько я знаю - доменная зона не влияет на продвижение, если это не домен второго уровня (co.uk) и если это не труднодоступная доменная зона (de,fr и тд).
Но, могу в чём-то ошибаться.
лутчший урок по canvas, что видел!!!
божественное произношение англ...
Спасибо за уроки Если сможете подскажите в коде ниже где косяк? Не выводит текст
Привет
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);
А будет видео по созданию диаграмм JS или SVG?
хоть я ни бум бум в программировании, но было очень интересно! что здесь является языком программирования: канвас или джаваскрипт?
Второе.
Я чё то маленько потерялся.
corse.push() - добавили тупо любой текст, в итоге при очередном вырезании shift получает этот текст, закидывает в объект на один элемент clientX: crd[ 0 ]
второй clientY: crd[ 1 ] пустой остаётся и дальнейшие действия не прокатывают из-за несуразицы кода поэтому и не дорисовывает линии. Я так понимаю? Или я упустил глубокий смысл текста в push
Хауди, привет!
Рисовалка на канве, это конечно хорошо.. но что, если дело касается взаимодействия с нарисованными элементами?) Как ловить на них события мыши? Есть библиотека Kanva кажется, там есть такой функционал, можно создавать layers и ловить на них события. А если без библиотеки?
Если использовать svg, то это выходит проще.
Простые расчеты от e.offsetX, как и в любых граф. приложениях.
Cпасибо! Вопрос: как мне сделать изменять background-image на файл, выбранный юзером?
Что обозначают скобки { } , после того, как ты написал function replay() ?
ору, я надеюсь за 4 месяца ты хоть что то изучил, я так просто ору, зачем идти учить canvas, если ты даже не понимаешь где пишется логика у функции
@@mathiaswei8715 зачем ты мне это пишиш, я уже знаю html препроцессор kit, css препроцессор sass на синтаксисе scss, git github знаю , именно работу с консольной, js более чем основы, вот учу react и иногда node, вообще это глупо, зачем ему canvas, если он не знает что такое function, уму не постижимо, таким людям не нужно подсказывать , он должен идти основы учить, да и мы же программисты, должны сами искать ответы на свои вопросы, это важный скилл
Сделал все как показано в видео, но фигура не рисуется
Сможешь сделать видео про grid layout
За песню из мема кот носок лайк)
Привет автор, ответь пожалуйста, реально ли с помощью канваса рисовать картинку на компе и отправлять на сервер и она будет уникальной, то есть индентифицировать пользователя?
19:46 не отрисовался красный в градиенте, потому что ширина 500?
Верно
Отличный урок! Но есть вопрос, который мучает меня, как это работает на 31:12 ? у меня с crd не работает, переписал так
var e = {
clientX: coords.shift(),
clientY: coords.shift()
};
и все заработало.
Не знаю может это какое-то глобальное обновление в JS 😕
спасибо за урок!
Хей Хауди Хо ты какои тип прогромирования учил или ещё учиши?
А кто Хаоди по национальности?
Спасибо за труд
Очень круто!
Эти промежутки между шарами появляются если частота опроса мыши маленькая. При 1000 почти нормально рисуется. на 125 большие промежутки.
180 - like ; 0 - dislike
вопросик, а зачем 27:00 вообще нужно функция clear, если при клике на KeyS можно написать => ctx.clearRect(0, 0, canv.width, canv.height), все так же работает у меня
Всё классно. Но только не понятно как залить фигуру которая нарисована линиями. Типо как сделать border ты показал. А как сделать заливку нет
Хотя спасибо, подтолкнул .Самому разобраться.
*Спустя наверное год решил переписать свой старый paint :)*
P.S: _Код пришлось сильно ужать и изуродовать т.к. он не помещался в рамках моего статуса на_ *CodePen*
codepen.io/KOSAKURA59a56cfaf4/project/editor/ZmpeVj
На 18-й секунде эффектно
спасибо!
У меня трабл возник, знающие подскажите)
По нажатию круг появляется левее места нажатия,в чём дело?
У меня было такое только в мобильной версии, там вообще с канвасом проблема, как я понимаю. Если у тебя в десктопе так, то хз
Почему используется манипуляция с fillRect() и белым цветом, вместо того, чтобы сделать clearRect(0,0,canv.width,canv.height)?
Хауди, почему забросил такие уроки??? обидно....
Интересно. По простому хочу сказать что пытаюсь сделать - хочу сделать холст, на который можно перетаскиванием размещать предметы. Как понимаю можно фото превратить в объекты и двигать их на холсте.
А вот еще хочу спросить - как задать масштаб и сетку-линейку есть ли такие инструменты?
Хауди, привет. Где Python Kivy? Уже месяц прошел(
ClearRect() тоже пойдет?
Пожалуйста скажите как сделать так чтобы твоём калькуляторе использовался один input и чтобы твоя программа невыводила то что ты написал умения работает только с двумя input
В хроме не работает ctx.drawWindow
Привет а можно вапрос?Я в 29:9 не понел что и как ты пишеш???
29:09?
Спасибо за видео! Встала задача поворачивать треугольник по оси Y, как это можно сделать? Обычно все видео о том как повернуть ту или иную фигуру по часовой стрелке, а как ее поворачивать в другой плоскости нет(
просто пиши - в начале цифры!
Интересный урок.
А есть возможность этот рисунок сохранить в видео?
В теории, - да, а на практике это довольно сложно.
a gde uroki po python kivy?((
Из этого видео я понял, почему в пэинт линяя закругленная.
Круто !
Как картинки загружать канвасом? Не одну, а несколько, для создания коллажа?
Спасибо!
Было бы шик делать текстовые версии на сайте. Читать как то удобнее
Очень крутой и полезный видос. Спасибо!
Как сделать изображение на весь экран и поверх накладывать изображения с анимацией ??
Здравствуйте, столкнулся с такой проблемой: при написании подобного кода выдает ошибку, мол не может выполнить getContext, т.к. canv = null. Но при написании строки $('document').ready(function(){
//код
});
все отлично работает. Автор канала не использует эту команду, но у него все работает. Что не так с моим Chrome?
0:40 старый ... эксплорер версии 9.. ХА!!! я еще IE 5.5 помню.. и Милениум
what is the SUBLIME COLOR SCHEME name ?
Как залить эту игру, допустим в вк?
Зачем нам Иван Петриченко, когда у нас есть ты?)
Я вас прошу посоветовать приложение для изучения языков програмирывания на безе IOS