JavaScript Canvas 1. Основы canvas

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.

КОМЕНТАРІ: 83

@vladimirastrelin1719 2 роки тому

Спасибо большое, прекрасный урок, всё просто, доходчиво и понятно объяснено!

@yury715 3 роки тому

Спасибо, хороший урок. Потренировался и понял что не все так просто. Есть последовательность, сперва задать размеры стиль а потом команда рисовать.

@alexneva78 6 років тому

Классный и понятный урок, спасибо

@user-bw7ov8ip5w 3 роки тому

Спасибо большое за уроки!

@kawaikaino5277 7 років тому

интересно продолжайте

@Skilling27 4 роки тому

Толково-разжеванный урок! Спасибо!

@borkhalenko 3 роки тому

реально, автор весь урок что-то жевал

@brayaka1418 4 роки тому

Удивительно но ДОСТУПНО и ПРОСТО в отличии от других! БОЛЬШОЙ жирный лайк Вам и Спасибо!

@neonneon2091 3 роки тому

Хауди Хо: ну да, ну да, пошел я нахер

@PolishchukTatiana 4 роки тому

Целое видео прикалывала эта фраза - "по одной простой причине",она звучала чуть ли не каждую минуту, но даже она не помешала процессу, ведь объяснение бесподобное

@anbu2413 4 роки тому

дадада))

@urbanmauglisq9554 5 років тому

Спасибо!

@anastasiiam9930 4 роки тому

Крутейший урок, спасибо большое, пишу змейку!

@maximplyashchenko5610 4 роки тому

По одной простой причине видео - класс)

@user-oj9dj6vb6q 5 років тому

Очень благодарен вам за ваши уроки!

@itgid 5 років тому

Спасибо!

@yaokouassijean-claude1499 7 років тому

Отлично)

@itgid 7 років тому

Спасибо.

@allineathaie9810 3 роки тому

i dont understand what you say, but your act helpful for me

@user-st1or6db5m Рік тому

Добрый день.Подскажите как написать код чтобы была возможность выбора инстурумента( квадрат или круг или линия)?

@it8995 4 роки тому

ааах-светлый idle

@LeanaMigdal 3 роки тому

Вопрос: если я хочу подгрузить img из файла и сделать из него background-image - как это сделать?

@rimavedeckiene2203 4 місяці тому

Ваши уроки очень интересны. Будет ли актуален canvas в 2024 году?

@maxkrutov39 6 років тому

Добрый день. Спасибо за Ваши познавательные и содержательные уроки! Подскажите мне пожалуйста как новичку, что мне изучить в первую очередь: уроки canvas или уроки java script? Заранее спасибо Вам, за Ваш ответ!

@itgid 6 років тому

Max Krutov конечно js. Ведь канвас использует js

@maxkrutov39 6 років тому

Благодарю Вас, очень помогли мне!

@mrzorroz1030 7 років тому

Здравствуйте! Я бы очень хотел видеть видео по круглому анимированному прогресс бару!

@itgid 7 років тому

Легко, внешний вид можете примерно указать?

@4eppu_ru 7 років тому

MrZorro z а я бы хотел увидеть продолжение по созданию магазина)

@user-gl3zm6nl2k 5 років тому

А я бы хотел за секунды загрузить все знания по JS напрямую себе в мозг, как в Матрице.

@user-si5ip8fe5n 4 роки тому

@@user-gl3zm6nl2k скоро это будет реально и нам даже это наскучит

@khv_muz2271 2 роки тому

@@user-gl3zm6nl2k Я тоже об этом недавно думал 😁

@user-ty6fq9os9k 3 роки тому

Как картинки загружать канвасом. Не одну, а несколько - для коллажа?

@user-el5pk8wk1j 5 років тому

Расскажите пожалуйста про fingerprint javascript. Я так понял есть технология отслеживания уникальных посетителей при помощи canvas. При заходе на определенный сайт срабатывает Js и рисует в canvas определенную картинку. Время ее отрисовки индивидуально для каждого компьютерного железа. Таким образом можно вести статистику посещений сайта с определенной машины и куки не нужны

@itgid 5 років тому

не слышал о таком. Если есть ссылки, то почитал бы...

@user-el5pk8wk1j 5 років тому

В общем смотрел видео о том как сайты могут идентифицировать пользователя, который пытается скрыть свой Ip использовать прокси, очищать куки и т д и наткнулся на видео ukposts.info/have/v-deo/kaqTrK-LrIx9k3k.htmlm31s это касается обеспечения анонимности в сети ну и вот еще habr.com/company/oleg-bunin/blog/321294/

@user-dh5ms9dh5y 4 роки тому

var canvas = document.getElementById('coul'); var ctx = canvas.getContext('2d'); ctx.fillRect(100, 50, 150, 75): Ругается на вторую строчку. Говорит примерно так: свойство getContext не читается, так как равно нулю. Подскажите пожалуйста решение проблемыы подробнее. Заранее спасибо.

@cilferFM 3 роки тому

Как getContext не выдал ошибку если canvas описывается позже js?

@psyhoticdreams9842 Рік тому

что за компилятор?

@goodman8956 6 років тому

такой вопрос, а что бы не задавать в html width и heigth где нужно прописать команды? я пробовал в js (ctx.style.width = 100 + 'px';) но не помогло, прямоугольник по прежнему отображался ниже заданных координат

@deniskalinin5101 6 років тому

задай в сам канвас а не в контекст

@user-nf5yc7xz9b Рік тому

Добрый день Александр , скажите а эти уроки по canvas еще актуальны ?

@itgid Рік тому

Да.

@PoweredHouse 5 років тому

Можно ли данный метод интегрировать в онлайн калькулятор для визуализации расчетов?

@user-pi3em2ke2l 4 роки тому

Конешно

@user-pi3em2ke2l 4 роки тому

Можеш использовать Chart.js

@levongalstyan79 Рік тому

Актуален?

@user-dp8xc9tx8n 4 роки тому

Спасибо за урок. Но у меня появился вопрос. Пишу код на sublime text. Но почему-то в консоле даётся ошибка на getContext(2d). Не как не смог решит эту проблему. Выходит такая ошибка: cannot read property getContext of null. Из-за чего может выйти это ошибка. Если знаете подскажите пжл. Заранее спасибо

@steelwind9212 4 роки тому

Ну, чувачок, есть такая вещь - типы данных. Дык вот, метод .getContext поддерживает тип данных string. Если тебе это ничего не объясняет, скажу проще - оберни 2d в апострофы - ' '.

@forxz1 6 років тому

Скажите,какая у вас клавиатура?

@andyvoice 4 роки тому

apple бабочка на маке мне кажется) звук клавиатуры режет уши

@cyraxkillallx6677 3 роки тому

@@andyvoice попробуй запиши видео без звука клавиатуры, умник. И расскажи как ты это сделал!?

@nextgen3442 2 роки тому

@@cyraxkillallx6677 Купить микрофон не за 150 рублей. По факту практически любой конденсаторный микрофон с направленной записью не будет ловить звуки клавиатуры

@spacekraken67 Рік тому

5 лет назад ого

@rustammaeyrz9734 3 роки тому

Здравствуйте я хотел задать вопрос нужно ли учить css. Если знаешь js. И canvas

@kaif1267 3 роки тому

Да

@kaif1267 3 роки тому

Так как ты учишь JS и canvas ,то скорей всего ты хочешь пойти во фронтенд,а html и CSS это фундамент на котором все строится

@kaif1267 3 роки тому

Если ты даже просто для саморазвития это учишь ,то без основ в CSS ты навряд ли даже сделаешь слайдер

@rustammaeyrz9734 3 роки тому

@@kaif1267 ну СПС за подсказку отдуши ну если я знаю JavaScript+ css+ html и canvas у меня будет возможность создать игры ?

@user-xp7hb8jh8j 6 років тому

Grid! Griiid, не надо setka! Griiid!

@itgid 6 років тому

ок. Учту.

@user-pi3em2ke2l 4 роки тому

Ты в Америке живёшь?

@SpawnerHocKoB 6 років тому

У кого ошибка в консоли - допишите defer при подключении js

@itgid 6 років тому

Скиньте запакованный в zip пример.

@SpawnerHocKoB 6 років тому

Не, я-то проблему решил, это я решение описал) Просто я не дописал defer при подключении и мучился, не мог понять, из-за чего не появляется прямоугольник

@sergeydiachenko1429 6 років тому

js подключать бы перед или оборачивать сам скрипт в DOMContentLoaded ивэнт

@SgAnka 6 років тому

Этот defer не нужен,по правильному,запульни js в конец перед закрывающимся body и этот атрибут не понадобится

@Wapskill 7 років тому

пока в html не прописал ширину и высоту кенваса, черный прямоугольник так и не появился

@itgid 7 років тому

А css вы правильно подключили?

@Wapskill 7 років тому

css подключал правильно, прямоугольник с бордером отображался. Ошибка была в js. Спасибо за ответ.

@nikitaprimak5176 5 років тому

потому что когда вы получаете элемент он еще не прогрузился надо либо скрипт подключить в конце страницы либо указать атрибут defer

@marharytahlinskaya1165 5 років тому

Ссылка с файлами не работает.

@itgid 5 років тому

завтра будет работать.

@Morrynsh 6 років тому

Но зачем рисование,оно тут не красивое и можно использовать картинки

@itgid 6 років тому

Конечно можно. Просто это уроки на понимание, поэтому минимум отвлечения на код.

@halty1798 5 років тому

бек Храунд

@ricojohn8249 2 роки тому

а шо такое, автор может быть Украинец, прикольно звучит)

@Lotoss25 5 років тому

getContext не срабатывает var canvas = document.getElementById("can1"); //да, canvas у меня с id="can1" var ctx = canvas.getContext("2d"); Что не так ?

@Dwemer47 5 років тому

атрибут defer проверьте есть ли в html файле.

@Lotoss25 5 років тому

@@Dwemer47 Проверил, не было такого! В консоли пишет ошибку в var ctx = canvas.getContext("2d"); (Uncaught TypeError: Cannot read property 'getContext' of null)

@Lotoss25 5 років тому

@@Dwemer47 Короче, таки нашел решение, но не понял чего у автора работает, а у меня - нет! Решения два: 1) Поставить async в тег скрипта(html), или же добавить window.onload в сам скрипт.