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