JavaScript Canvas 1. Основы canvas

  Рет қаралды 101,105

WebDev с нуля. Канал Алекса Лущенко

WebDev с нуля. Канал Алекса Лущенко

7 жыл бұрын

⏰ Курс JavaScript 2.0: itgid.info/course/javascript-2
🧠 Чат Telegram c мозголомками : t.me/itgid_info
👇 Разверни для полной информации
💎 Курс Функции в JavaScript: itgid.info/course/function-2021
🧑🏻‍💻 Сайт: itgid.info
😋 Курс Методы массивов: itgid.info/course/arraymethod
Скачать файлы урока: w3.org.ua/canvas/javascript-ca...
Мы на facebook: / w3.org.ua
Изучаем рисование в canvas с помощь JavaScript.

Пікірлер: 84
@vladimirastrelin1719
@vladimirastrelin1719 2 жыл бұрын
Спасибо большое, прекрасный урок, всё просто, доходчиво и понятно объяснено!
@alexneva78
@alexneva78 6 жыл бұрын
Классный и понятный урок, спасибо
@Skilling27
@Skilling27 4 жыл бұрын
Толково-разжеванный урок! Спасибо!
@borkhalenko
@borkhalenko 3 жыл бұрын
реально, автор весь урок что-то жевал
@user-bw7ov8ip5w
@user-bw7ov8ip5w 3 жыл бұрын
Спасибо большое за уроки!
@yury715
@yury715 3 жыл бұрын
Спасибо, хороший урок. Потренировался и понял что не все так просто. Есть последовательность, сперва задать размеры стиль а потом команда рисовать.
@brayaka1418
@brayaka1418 4 жыл бұрын
Удивительно но ДОСТУПНО и ПРОСТО в отличии от других! БОЛЬШОЙ жирный лайк Вам и Спасибо!
@neonneon2091
@neonneon2091 4 жыл бұрын
Хауди Хо: ну да, ну да, пошел я нахер
@kawaikaino5277
@kawaikaino5277 7 жыл бұрын
интересно продолжайте
@anastasiiam9930
@anastasiiam9930 4 жыл бұрын
Крутейший урок, спасибо большое, пишу змейку!
@user-bi3cb7xu6e
@user-bi3cb7xu6e Ай бұрын
спасибо за всё 👍👍👍👍👍👍👍
@user-oj9dj6vb6q
@user-oj9dj6vb6q 5 жыл бұрын
Очень благодарен вам за ваши уроки!
@itgid
@itgid 5 жыл бұрын
Спасибо!
@PolishchukTatiana
@PolishchukTatiana 4 жыл бұрын
Целое видео прикалывала эта фраза - "по одной простой причине",она звучала чуть ли не каждую минуту, но даже она не помешала процессу, ведь объяснение бесподобное
@anbu2413
@anbu2413 4 жыл бұрын
дадада))
@maximplyashchenko5610
@maximplyashchenko5610 4 жыл бұрын
По одной простой причине видео - класс)
@urbanmauglisq9554
@urbanmauglisq9554 6 жыл бұрын
Спасибо!
@yaokouassijean-claude1499
@yaokouassijean-claude1499 7 жыл бұрын
Отлично)
@itgid
@itgid 7 жыл бұрын
Спасибо.
@it8995
@it8995 4 жыл бұрын
ааах-светлый idle
@aprukers11
@aprukers11 3 жыл бұрын
i dont understand what you say, but your act helpful for me
@spacekraken67
@spacekraken67 Жыл бұрын
5 лет назад ого
@LeanaMigdal
@LeanaMigdal 3 жыл бұрын
Вопрос: если я хочу подгрузить img из файла и сделать из него background-image - как это сделать?
@user-st1or6db5m
@user-st1or6db5m 2 жыл бұрын
Добрый день.Подскажите как написать код чтобы была возможность выбора инстурумента( квадрат или круг или линия)?
@user-ty6fq9os9k
@user-ty6fq9os9k 3 жыл бұрын
Как картинки загружать канвасом. Не одну, а несколько - для коллажа?
@user-dh5ms9dh5y
@user-dh5ms9dh5y 4 жыл бұрын
var canvas = document.getElementById('coul'); var ctx = canvas.getContext('2d'); ctx.fillRect(100, 50, 150, 75): Ругается на вторую строчку. Говорит примерно так: свойство getContext не читается, так как равно нулю. Подскажите пожалуйста решение проблемыы подробнее. Заранее спасибо.
@rimavedeckiene2203
@rimavedeckiene2203 6 ай бұрын
Ваши уроки очень интересны. Будет ли актуален canvas в 2024 году?
@maxkrutov39
@maxkrutov39 6 жыл бұрын
Добрый день. Спасибо за Ваши познавательные и содержательные уроки! Подскажите мне пожалуйста как новичку, что мне изучить в первую очередь: уроки canvas или уроки java script? Заранее спасибо Вам, за Ваш ответ!
@itgid
@itgid 6 жыл бұрын
Max Krutov конечно js. Ведь канвас использует js
@maxkrutov39
@maxkrutov39 6 жыл бұрын
Благодарю Вас, очень помогли мне!
@mrzorroz1030
@mrzorroz1030 7 жыл бұрын
Здравствуйте! Я бы очень хотел видеть видео по круглому анимированному прогресс бару!
@itgid
@itgid 7 жыл бұрын
Легко, внешний вид можете примерно указать?
@G2W_FUN
@G2W_FUN 7 жыл бұрын
MrZorro z а я бы хотел увидеть продолжение по созданию магазина)
@user-gl3zm6nl2k
@user-gl3zm6nl2k 6 жыл бұрын
А я бы хотел за секунды загрузить все знания по JS напрямую себе в мозг, как в Матрице.
@user-si5ip8fe5n
@user-si5ip8fe5n 4 жыл бұрын
@@user-gl3zm6nl2k скоро это будет реально и нам даже это наскучит
@khv_muz2271
@khv_muz2271 2 жыл бұрын
@@user-gl3zm6nl2k Я тоже об этом недавно думал 😁
@cilferFM
@cilferFM 3 жыл бұрын
Как getContext не выдал ошибку если canvas описывается позже js?
@goodman8956
@goodman8956 6 жыл бұрын
такой вопрос, а что бы не задавать в html width и heigth где нужно прописать команды? я пробовал в js (ctx.style.width = 100 + 'px';) но не помогло, прямоугольник по прежнему отображался ниже заданных координат
@deniskalinin5101
@deniskalinin5101 6 жыл бұрын
задай в сам канвас а не в контекст
@user-el5pk8wk1j
@user-el5pk8wk1j 6 жыл бұрын
Расскажите пожалуйста про fingerprint javascript. Я так понял есть технология отслеживания уникальных посетителей при помощи canvas. При заходе на определенный сайт срабатывает Js и рисует в canvas определенную картинку. Время ее отрисовки индивидуально для каждого компьютерного железа. Таким образом можно вести статистику посещений сайта с определенной машины и куки не нужны
@itgid
@itgid 6 жыл бұрын
не слышал о таком. Если есть ссылки, то почитал бы...
@user-el5pk8wk1j
@user-el5pk8wk1j 6 жыл бұрын
В общем смотрел видео о том как сайты могут идентифицировать пользователя, который пытается скрыть свой Ip использовать прокси, очищать куки и т д и наткнулся на видео kzfaq.info/get/bejne/j-CSq9yF2rywYnk.htmlm31s это касается обеспечения анонимности в сети ну и вот еще habr.com/company/oleg-bunin/blog/321294/
@psyhoticdreams9842
@psyhoticdreams9842 Жыл бұрын
что за компилятор?
@user-dp8xc9tx8n
@user-dp8xc9tx8n 4 жыл бұрын
Спасибо за урок. Но у меня появился вопрос. Пишу код на sublime text. Но почему-то в консоле даётся ошибка на getContext(2d). Не как не смог решит эту проблему. Выходит такая ошибка: cannot read property getContext of null. Из-за чего может выйти это ошибка. Если знаете подскажите пжл. Заранее спасибо
@steelwind9212
@steelwind9212 4 жыл бұрын
Ну, чувачок, есть такая вещь - типы данных. Дык вот, метод .getContext поддерживает тип данных string. Если тебе это ничего не объясняет, скажу проще - оберни 2d в апострофы - ' '.
@user-nf5yc7xz9b
@user-nf5yc7xz9b Жыл бұрын
Добрый день Александр , скажите а эти уроки по canvas еще актуальны ?
@itgid
@itgid Жыл бұрын
Да.
@levongalstyan79
@levongalstyan79 Жыл бұрын
Актуален?
@PoweredHouse
@PoweredHouse 6 жыл бұрын
Можно ли данный метод интегрировать в онлайн калькулятор для визуализации расчетов?
@user-pi3em2ke2l
@user-pi3em2ke2l 4 жыл бұрын
Конешно
@user-pi3em2ke2l
@user-pi3em2ke2l 4 жыл бұрын
Можеш использовать Chart.js
@forxz1
@forxz1 6 жыл бұрын
Скажите,какая у вас клавиатура?
@andyvoice
@andyvoice 4 жыл бұрын
apple бабочка на маке мне кажется) звук клавиатуры режет уши
@cyraxkillallx6677
@cyraxkillallx6677 4 жыл бұрын
@@andyvoice попробуй запиши видео без звука клавиатуры, умник. И расскажи как ты это сделал!?
@nextgen3442
@nextgen3442 2 жыл бұрын
@@cyraxkillallx6677 Купить микрофон не за 150 рублей. По факту практически любой конденсаторный микрофон с направленной записью не будет ловить звуки клавиатуры
@marharytahlinskaya1165
@marharytahlinskaya1165 5 жыл бұрын
Ссылка с файлами не работает.
@itgid
@itgid 5 жыл бұрын
завтра будет работать.
@rustammaeyrz9734
@rustammaeyrz9734 3 жыл бұрын
Здравствуйте я хотел задать вопрос нужно ли учить css. Если знаешь js. И canvas
@kaif1267
@kaif1267 3 жыл бұрын
Да
@kaif1267
@kaif1267 3 жыл бұрын
Так как ты учишь JS и canvas ,то скорей всего ты хочешь пойти во фронтенд,а html и CSS это фундамент на котором все строится
@kaif1267
@kaif1267 3 жыл бұрын
Если ты даже просто для саморазвития это учишь ,то без основ в CSS ты навряд ли даже сделаешь слайдер
@rustammaeyrz9734
@rustammaeyrz9734 3 жыл бұрын
@@kaif1267 ну СПС за подсказку отдуши ну если я знаю JavaScript+ css+ html и canvas у меня будет возможность создать игры ?
@Wapskill
@Wapskill 7 жыл бұрын
пока в html не прописал ширину и высоту кенваса, черный прямоугольник так и не появился
@itgid
@itgid 7 жыл бұрын
А css вы правильно подключили?
@Wapskill
@Wapskill 7 жыл бұрын
css подключал правильно, прямоугольник с бордером отображался. Ошибка была в js. Спасибо за ответ.
@nikitaprimak5176
@nikitaprimak5176 5 жыл бұрын
потому что когда вы получаете элемент он еще не прогрузился надо либо скрипт подключить в конце страницы либо указать атрибут defer
@user-xp7hb8jh8j
@user-xp7hb8jh8j 6 жыл бұрын
Grid! Griiid, не надо setka! Griiid!
@itgid
@itgid 6 жыл бұрын
ок. Учту.
@user-pi3em2ke2l
@user-pi3em2ke2l 4 жыл бұрын
Ты в Америке живёшь?
@SpawnerHocKoB
@SpawnerHocKoB 7 жыл бұрын
У кого ошибка в консоли - допишите defer при подключении js
@itgid
@itgid 7 жыл бұрын
Скиньте запакованный в zip пример.
@SpawnerHocKoB
@SpawnerHocKoB 7 жыл бұрын
Не, я-то проблему решил, это я решение описал) Просто я не дописал defer при подключении и мучился, не мог понять, из-за чего не появляется прямоугольник
@sergeydiachenko1429
@sergeydiachenko1429 7 жыл бұрын
js подключать бы перед или оборачивать сам скрипт в DOMContentLoaded ивэнт
@SgAnka
@SgAnka 6 жыл бұрын
Этот defer не нужен,по правильному,запульни js в конец перед закрывающимся body и этот атрибут не понадобится
@halty1798
@halty1798 5 жыл бұрын
бек Храунд
@ricojohn8249
@ricojohn8249 3 жыл бұрын
а шо такое, автор может быть Украинец, прикольно звучит)
@Lotoss25
@Lotoss25 5 жыл бұрын
getContext не срабатывает var canvas = document.getElementById("can1"); //да, canvas у меня с id="can1" var ctx = canvas.getContext("2d"); Что не так ?
@Dwemer47
@Dwemer47 5 жыл бұрын
атрибут defer проверьте есть ли в html файле.
@Lotoss25
@Lotoss25 5 жыл бұрын
@@Dwemer47 Проверил, не было такого! В консоли пишет ошибку в var ctx = canvas.getContext("2d"); (Uncaught TypeError: Cannot read property 'getContext' of null)
@Lotoss25
@Lotoss25 5 жыл бұрын
@@Dwemer47 Короче, таки нашел решение, но не понял чего у автора работает, а у меня - нет! Решения два: 1) Поставить async в тег скрипта(html), или же добавить window.onload в сам скрипт.
@Morrynsh
@Morrynsh 6 жыл бұрын
Но зачем рисование,оно тут не красивое и можно использовать картинки
@itgid
@itgid 6 жыл бұрын
Конечно можно. Просто это уроки на понимание, поэтому минимум отвлечения на код.
@Movescene5254
@Movescene5254 6 жыл бұрын
c1 он написал видите ли сук,а надо было canvas1,два дня маялся
@user-cl3ej8mt9i
@user-cl3ej8mt9i 6 жыл бұрын
как лох )
JavaScript Canvas 2. Рисуем линии
16:36
WebDev с нуля. Канал Алекса Лущенко
Рет қаралды 42 М.
孩子多的烦恼?#火影忍者 #家庭 #佐助
00:31
火影忍者一家
Рет қаралды 38 МЛН
small vs big hoop #tiktok
00:12
Анастасия Тарасова
Рет қаралды 28 МЛН
He sees meat everywhere 😄🥩
00:11
AngLova
Рет қаралды 10 МЛН
1❤️
00:17
Nonomen ノノメン
Рет қаралды 9 МЛН
Как создать React JS проект и загрузить его на Github Pages
8:18
Типичный Веб Разработчик
Рет қаралды 5 М.
Coding Challenge #32.1: Agar.io - Part 1 (Basic Game Mechanics)
25:06
The Coding Train
Рет қаралды 319 М.
JavaScript Canvas 8. Игра "Жизнь"
29:29
WebDev с нуля. Канал Алекса Лущенко
Рет қаралды 38 М.
Interacting with HTML5 Canvas for Complete Beginners
27:21
Chris Courses
Рет қаралды 223 М.
Создание игры на чистом JavaScript за 20 минут!
21:45
Гоша Дударь
Рет қаралды 333 М.
HTML5 Canvas CRASH COURSE for Beginners
51:26
Franks laboratory
Рет қаралды 212 М.
JavaScript Canvas 4. Дуги и круги
18:47
WebDev с нуля. Канал Алекса Лущенко
Рет қаралды 29 М.
孩子多的烦恼?#火影忍者 #家庭 #佐助
00:31
火影忍者一家
Рет қаралды 38 МЛН