Как получить цвет пикселя js
Обновлено: 02.07.2024
Сайт о том, как стать программистом и как с этим жить потом
Мне очень приятно видеть рост числа уникальных посетителей моего блога, а потому я изо всех сил стараюсь затрагивать полезные и интересные темы. Как некоторые из Вас могли увидеть из предыдущего поста, я обзавелся аккаунтом в сети GitHub, и теперь всем будет удобнее брать исходники моего кода и следить за его развитием.
Итак, чтобы с ходу заинтересовать читателя, покажу рабочий пример
С чего же начать в разработке данного модуля? Давайте попробуем построить модель приложения. За основу возьмем цветовую модель HSV. Она состоит из:
Шкалу Hue мы будем генерировать автоматически. До выхода HTML5 нам пришлось бы звать на помощь сторонние средства, но пятая версия языка разметки имеет в своем арсенале тэг , который создает область для рисования, доступную для специализированных JavaScript-методов.
В качестве поля выбора насыщенности и яркости нам послужит div, внутрь которого мы положим квадрат с соответствующим градиентом (все можно найти в указанном в конце статьи репозитории), а подложку будем менять в зависимости от выбранного на шкале Hue цвета.
Алгоритм будет таков:
Наш модуль будет подчиняться паттерну Singleton (Одиночка), т.е. на одной странице будем генерировать один colorpicker.
Подробно я опишу метод init. Внутри него будет три переменных-объекта : picker, hue и tones (сам механизм целиком, шкала цветов H и шкала оттенков SV соответственно). Далее мы создаем на странице DOM-элементы, необходимые для работы colorpicker-а.
Для объекта picker пишем метод init, внутри которого мы задаем параметры инициализации инструментов и производим их собственно инициализацию.
Сразу же появляются два метода init для объектов hue и tones, которые должны быть описаны. Начнем с hue.
Объявляем объект layer внутри hue, для которого есть метод create, внутри которого есть метод gradient. Тут самое интересное!
Далее мы создаем объект градиента внутри canvas.
Два последних метода заполняют полученным градиентом указанный DOM.
Также стоит рассмотреть метод hue2rgb.conv, который преобразует положение на всех трех шкалах (HSV) в цвета форматов HEX (шестнадцатеричный) и RGB.
Поскольку шкала SV по определению предоставляет нам квадрат 100 на 100, а DIV, в котором может содержаться элемент выбора, может оказаться больше или меньше, нам необходимо определить шаг выбора. Все просто - делим перемещение курсора на 100 =) . Расчитаем отклонение цвета на SV от Hue. В зависимости от него вычисляем каждую из трех составляющих RGB и возвращаем полученное значение.
Метод getHex позволяет нам преобразовать полученное значение RGB в HEX-формат. RGB поступает в виде массива из трех элементов ([R,G,B]), после чего значение каждого из них конвертируется в шестнадцатеричный формат. Для того, что соблюсти соответствие с графическими программами, в случае, если значание канала представляет собой значение из одной цифры, то мы её дублируем (т.о. если мы на выходе конвертации получили значение канала f, то в значении цвета будет ff).
Переменная-объект tones представляет собой SV-область выбора. Внутри нее генерируется маркер-кружок, который графически демонстрирует текущий выбранный оттенок. Шаг курсора также расчитывается делением на 100.
Метод cPos отслеживает положение курсора внутри SV-области, конвертирует его в цвет и присваивает значения результирующим полям.
Остальное - обработчики событий. Думаю, не нужно их подробно описывать, иначе зачем мы все здесь собрались?
В планах на улучшение : добавить возможность ручного ввода цвета в поля и, как следствие, обратной конвертации; копирование HEX-цвета в буфер обмена. Если же у кого-то из Вас возникнет желание сделать это самостоятельно, то я с удовольствием предоставляю ссылку на мой репозиторий в GitHub
В предыдущем руководстве вы всесторонне изучили работу с трансформациями, тенями и градиентами. Сегодня я покажу вам, как работать с пикселями в Сanvas: от простого получения значений компонентов цвета до того редактирования изображений на «холсте», которое выполняем в редакторе изображений.
Это несомненно одна из наиболее мощных встроенных возможностей Canvas, и я вам гарантирую, что сразу после ее освоения у вас появится целый ряд потрясающих идей.
Подготавливаем страницу
Вы будете использовать тот же самый шаблон HTML, что и в предыдущем руководстве, поэтому откройте свой любимый редактор и скопируйте следующий код:
Это всего лишь базовая HTML-страница с элементом canvas и некоторым кодом JavaScript, который выполняется после загрузки модели DOM (* Document Object Model – Объектная модель документа. Тут и далее примеч. пер.). Ничего фантастического тут нет.
Размещаем изображение на «холсте»
Вы можете манипулировать значениями пикселей чего-угодно, что прорисовано на «холсте», однако для достижения целей этого руководства мы будем использовать изображения. Это так отчасти из-за того, что мне важно показать вам, как загружать изображения в canvas, а также потому, что способность выполнять манипуляции с изображениями (например редактирование изображений) – это большой плюс рассматриваемой технологии.
Перед тем, как я покажу вам, как получать значения пикселей, давайте разместим изображение на «холсте». Вы запросто можете использовать любое изображение, однако для достижения целей этого руководства я буду использовать одно из моих собственных с Flickr.
При желании можете использовать это изображение, которое доступно для скачивания в различных размерах.
Загрузка изображения на «холст» выполняется в два этапа. Первый – загрузка изображения в элемент HTML image , что можно осуществить при помощи HTML или создания нового элемента DOM непосредственно в коде JavaScript. В нашем примере мы создадим новый элемент DOM – это чрезвычайно просто:
Здесь мы всего лишь создаем новый элемент DOM типа Image и задаем его в качестве значения переменной. Далее мы используем эту переменную для загрузки вашего изображения, задавая в качестве значения атрибута src изображения необходимый путь к файлу (* чтобы началась загрузка изображения, элемент не нужно добавлять к документу – оно начинает загружаться, как только задано значение свойства src). Стоит отметить, что при помощи этой техники мы бы могли загрузить изображение с удаленного компьютера, однако при этом позже у нас возникли бы некоторые проблемы, так что мы остановимся на использовании изображения с локального компьютера. Второй этап – прослушивание события load , которое будет сгенерировано, как только изображение загружено и готово к использованию.
Сразу после загрузки изображения мы можем разместить его на «холсте» одним махом. Для этого нам всего лишь необходимо передать переменную image , которую только что создали, в качестве аргумента метода drawImage 2-мерного контекста отображения. Разместите этот код в обработчике события загрузки для image следующим образом:
В данном случае метод drawImage принимает три аргумента: элемент с изображением и значения координат x и y для задания позиции изображения на «холсте». За счет этого кода изображение будет отображено в полном размере (ширина составляет 500px в нашем примере) и в указанной позиции:
Однако на самом деле drawImage может принимать еще два аргумента, за счет которых задаются значения ширины и высоты отображаемого изображения, следующим образом:
За счет этого кода изображение было бы отображено в половину своего изначального размера (ширина составляет 250px в нашем примере):
Вы можете пойти еще дальше и воспользоваться всеми девятью аргументами метода drawImage для прорисовывания только небольшой части изначального изображения вот так:
За счет этого кода будет выбран квадрат со значением стороны 200px вверху слева изображения и прорисован на «холсте» в квадрате со значением стороны 500px:
В псевдокоде (* язык, напоминающий императивный язык программирования и используемый в качестве нотации для описания алгоритмов и/или структуры программы) все девять аргументов drawImage можно описать следующим образом (s – для обозначения источника (source) и d – для обозначения места назначения (destination)):
Результат приведен на следующей иллюстрации:
Все просто, не так ли? По правде говоря, понимание любого аспекта работы Сanvas не вызывает трудностей, как только вы его проанализируете и рассмотрите каждый момент по отдельности.
Получаем значения компонентов цвета пикселей
Теперь, когда у вас имеется изображение на «холсте», пришло время получить значения компонентов цвета пикселей, благодаря чему вы сможете ими манипулировать.Однако давайте сейчас забудем о манипулировании и сосредоточимся исключительно на получении значений компонентов цвета пикселей, поскольку для понимания этой концепции необходимо некоторое время.
Вопросы безопасности
Разобравшись с этим, давайте продолжим и получим некоторые значения компонентов цвета пикселей!
Способ получения значений компонентов цвета пикселей странноватый
Как я уже упомянул в начале данного раздела, для понимания способа получения значений компонентов цвета пикселя «холста» необходимо некоторое время. Это так из-за способа, согласно которому пиксели сохраняются в Сanvas; они вовсе не хранятся как цельные пиксели. Вместо этого каждый пиксель разбивается на четыре отдельных компонента (красный, зеленый, синий и альфа (* в компьютерной графике - четвёртый компонент цвета, используемый для контроля смешивания цветов с фоном или нижележащим объектом. При этом его значение 1,0 означает полную непрозрачность, а 0,0 - полную прозрачность объекта)), и эти значения сохраняются в одномерном массиве со всеми значениями компонентов цвета для других пикселей. Поэтому вы не можете просто запросить данные из определенного пикселя, по крайней мере по умолчанию. Давайте поясню.
Для получения значений компонентов цвета пикселей вам необходимо вызвать метод getImageData 2-мерного контекста отображения следующим образом:
Этот метод принимает четыре аргумента, при помощи которых задается прямоугольная область «холста», значения пикселей которой вы хотите получить: координаты x и y начала отсчета, за которыми следуют значения ширины и высоты. Этот метод возвращает массив CanvasPixelArray , в котором содержатся все значения компонентов цвета пикселей заданной области. Первое, на что следует обратить внимание при работе с CanvasPixelArray , – это то, что для каждого пикселя задается четыре значения компонентов цвета, так что индексом первого компонента цвета каждого пикселя массива будет кратное 4 число (0 для первого значения первого пикселя, 4 для первого значения второго пикселя и т.д.):
Интересно (или раздражает, в зависимости от того, как вы смотрите на массив) то, что тут не используется концепция позиции координат (x, y), из-за чего получить значения компонентов цвета для определенного пикселя немного тяжелее, чем получить определенное значение двухмерного массива (например используя pixelArray[0][3] для получения значения пикселя в координате (1, 4)). Вместо этого вы должны использовать небольшую формулу, которая в действительности очень проста для понимания, если правильно объяснена:
Можете разобраться, что тут происходит? Давайте проанализируем формулу и представим, что мы хотим получить значения компонентов цвета для внутреннего пикселя в таблице пикселей 3x3 – пиксель в координате (2, 2).
Если вы посмотрите на предыдущие два изображения, то увидите, что значения компонентов цвета для этого пикселя начинаются с индекса 16, и для реализации этого в коде вам необходимо выполнить два шага: первый – вычислить индекс необходимого пикселя (координату y) в начале ряда, и затем добавить к этому индексу количество значений компонентов цвета между пикселем и началом ряда (координата х). Прозвучало немного запутанно, но проявите терпение.
Первая часть формулы проста: вы уже знаете, что на один пиксель приходится четыре значения цвета, а также что ширина таблицы составляет 3 пикселя. Для вычисления индекса пикселя в ряду у (2) вы подставляете эти значения в первую часть формулы, которая при этом будет выглядеть следующим образом:
В результате вы получаете значение индекса 12, которое соответствует индексу первого пикселя второго ряда в предыдущем изображении. Пока все должно быть понятно.
Следующий шаг – определение числа значений компонентов цвета, которые находятся перед необходимым вам пикселем. Для этого вы просто перемножаете число пикселей, находящихся перед необходимым вам пикселем, на четыре. Все просто. В нашем примере вторая часть формулы выглядела бы следующим образом:
Можете посчитать и получите 4, что в сумме с предыдущим значением дает значение индекса 16. Круто, да?
Я бы особо не переживал о полном ее понимании, просто знайте, что эта потрясающая небольшая формула существует и позволяет вам легко получить индекс значения красной компоненты цвета для любого пикселя. Для получения индекса значений остальных компонентов цвета пикселя (зеленый, синий или альфа) вы просто добавляете 1, 2 или 3 к вычисленному индексу соответственно.
Начинаем применять полученные знания
Теперь, когда вы знаете, как получить значения компонентов цвета любого необходимого вам пикселя, давайте применим эти знания и получим эти значения из изображения для изменения цвета фона веб-сайта. Подобная как бы техника хорошо бы подошла для реализации цветоподборщика (* диалоговое окно для выбора нового текущего цвета спрайтов, рисунков и закрашиваемых областей, а также для определения пользовательской цветовой палитры) веб-приложения для редактирования изображений.
Код для нашего примера довольно ясный, так что давайте напишем его весь сразу:
Вы узнаете первые несколько строк из предыдущих примеров. Новый код располагается в обработчике события click для canvas , который реализуется при помощи небольшого количества кода jQuery, чтобы сообщить вам, когда произошло нажатие по «холсту».
Внутри обработчика мы хотим определить пиксель, по которому было выполнено нажатие на «холсте». Для этого нам необходимо для начала вычислить смещение в пикселях верхней левой координаты «холста» относительно верхнего левого угла окна браузера; для этого можно воспользоваться методом offset jQuery. Далее мы можем определить пиксель, по которому было выполнено нажатие на «холсте», путем вычитания значения смещения из значений координат, содержащихся в объекте для события click ( pageX и pageY ). Вам несомненно стоит потратить немного времени на освоение информации о событии click JavaScript для углубления своих познаний о нем.
В следующих четырех строках происходит получение CanvasPixelArray для «холста» ( getImageData ), его сохранение в переменной, нахождение индекса значения красной компоненты цвета пикселя, по которому было выполнено нажатие, путем его вычисления при помощи ранее виденной вами формулы, и затем сохранение значений компонентов цвета пикселя в виде строки rgba CSS. Наконец, последний этап – установление в качестве значений компонентов цвета фона элемента body значений компонентов цвета пикселя, по которому было выполнено нажатие.
И после этого все готово. Протестируйте результат самостоятельно; нажмите по изображению на «холсте» и пронаблюдайте, как изменяется цвет фона веб-сайта. Если не работает, то убедитесь, что вы запустили демоверсию на сервере с доменным именем, как описано в разделе, посвященном вопросам безопасности.
Мы многое рассмотрели, и теперь вы умеете быстро и легко получать значения компонентов цвета любого пикселя на «холсте». Упоминал ли я, что вы также можете изменять значения компонентов цвета пикселей на «холсте». Нет? Ой! Тогда давайте теперь рассмотрим этот прием; с его помощью создаются очень крутые эффекты.
Добавляем к изображениям эффекты
Теперь, когда вы умеете получать значения цвета пикселей «холста», их изменение не должно составить особого труда. По сути, изменение этих значений цвета сводится к изменению значений в CanvasPixelArray и их дальнейшему прорисовыванию обратно на «холст». Давайте рассмотрим, как это осуществить.
Для начала подготовьте код, как в предыдущем разделе. В этом коде происходит загрузка изображения, его прорисовка на «холст» и получение данных его пикселей:
Пока все должно быть понятно. Далее необходимо перебрать каждый пиксель «холста» и изменить значения компонентов его цвета. В нашем примере вы переставите значения компонентов цветов путем вычитания текущего значения компонента цвета (от 0 до 255) из 255:
Тут не происходит ничего фантастического; вы просто перемножаете номер пикселя (i) на 4 для получения индекса значения красного компонента цвета для текущего пикселя в CanvasPixelArray . За счет добавления 1 или 2 к этому числу вы можете получить и изменить значения зеленого и синего компонентов цвета соответственно.
И, наконец, все, что вам теперь осталось, так это очистить «холст» (чтобы избавиться от изначального изображения) и затем воспользоваться методом putImageData 2-мерного контекста отображения для прорисовывания сохраненного CanvasPixelArray на «холст»:
И на этом, собственно, все; перезагрузите ваш браузер и взгляните. Круто, правда ведь?
Подведение итогов
Мы рассмотрели лишь некоторые аспекты работы с пикселями, однако я надеюсь, что в этом руководстве вы почерпнули достаточно информации для получения вдохновения. Я настоятельно рекомендую вам копнуть в этом вопросе поглубже и посмотреть, что еще вы можете делать с пикселями. Почему? Потому что все техники по работе с пикселями можно также применить к видео HTML5 и изображениям. Теперь вы поняли, какие возможности открываются перед вами за счет умения манипулировать пикселями.
В следующем руководстве, последнем в этой серии, мы будем рассматривать другие аспекты Canvas. Вы узнаете, как анимировать фигуры на «холсте», после чего у вас будет база, необходимая для создания мультипликаций, анимаций и игр. Это, бесспорно, мой любимый вариант использования Canvas.
До сих пор мы не смотрели на фактические пиксели нашего объекта canvas (далее "холст"). С объектом ImageData вы можете напрямую читать и писать массив данных для управления пиксельными данными. Мы также рассмотрим, как можно сгладить сглаживание изображения (сглаживание) и как сохранить изображения с вашего холста.
Объект ImageData
Объект ImageData представляет базовые пиксельные данные области объекта холста. Он содержит следующие атрибуты только для чтения:
width Ширина изображения в пикселях. height Высота изображения в пикселях. data A Uint8ClampedArray представляет собой одномерный массив, содержащий данные в порядке RGBA, с целыми значениями от 0 до 255 (в комплекте).
Свойство data возвращает Uint8ClampedArray , к которому можно получить доступ, чтобы посмотреть на необработанные пиксельные данные; каждый пиксель представлен четырьмя однобайтовыми значениями (красный, зелёный, синий и альфа в этом порядке, то есть формат «RGBA»). Каждый компонент цвета представлен целым числом от 0 до 255. Каждому компоненту присваивается последовательный индекс внутри массива, причём красный компонент верхнего левого пикселя находится в индексе 0 внутри массива. Затем пиксели идут слева направо, затем вниз, по всему массиву.
Uint8ClampedArray содержит высоту × ширину × 4 байта данных, значения индекса варьируются от 0 до (высота × ширина × 4) -1.
Например, чтобы прочитать значение синего компонента из пикселя в столбце 200, строка 50 на изображении, вы должны сделать следующее:
Вы можете получить доступ к размеру массива пикселей в байтах, прочитав атрибут Uint8ClampedArray.length :
Создание объекта ImageData
Чтобы создать новый пустой объект ImageData , вы должны использовать метод createImageData () (en-US) . Существуют две версии метода createImageData() :
Это создаёт новый объект ImageData с указанными параметрами. Все пиксели заданы прозрачным черным.
Вы также можете создать новый объект ImageData ImageData с теми же размерами, что и объект, заданный anotherImageData . Все пиксели нового объекта установлены на прозрачный чёрный. Это не копирует данные изображения!
Получение пиксельных данных для контекста
Чтобы получить объект ImageData , содержащий копию пиксельных данных для контекста холста, вы можете использовать метод getImageData() :
Этот метод возвращает объект ImageData , представляющий пиксельные данные для области холста, углы которого представлены точками ( left , top ), ( left+width , top ), ( left , top+height ) и ( left+width , top+height ). Координаты задаются в единицах пространства координат холста.
Примечание: Любые пиксели за пределами холста возвращаются как прозрачный чёрный цвет в результирующий объект ImageData .
Этот метод также показан в статье Manipulating video using canvas.
Выбор цвета
В этом примере мы используем метод getImageData() для отображения цвета под курсором мыши. Для этого нам нужна текущая позиция мыши с layerX и layerY , затем мы просматриваем пиксельные данные в этой позиции в массиве пикселей, который предоставляет нам getImageData() . Наконец, мы используем данные массива для установки цвета фона и текста <div> для отображения цвета.
Отображение пиксельных данных в контекст
Вы можете использовать метод putImageData() для рисования пиксельных данных в контексте:
Параметры dx и dy указывают координаты устройства в контексте, в котором будет отображаться верхний левый угол пиксельных данных, которые вы хотите нарисовать.
Например, чтобы нарисовать все изображение, представленное myImageData , в верхнем левом углу контекста, вы можете просто сделать следующее:
Оттенки серого цвета и инвертирование цветов
В этом примере мы перебираем все пиксели для изменения их значений, а затем помещаем модифицированный массив пикселей обратно в canvas с помощью putImageData(). Функция инвертирования просто вычитает каждый цвет из максимального значения 255. Функция оттенков серого просто использует среднее значение красного, зелёного и синего. Вы также можете использовать средневзвешенное значение, заданное формулой x = 0.299r + 0.587g + 0.114b , например. Для дополнительной информации см. Grayscale в Википедии.
Масштабирование и сглаживание
С помощью метода drawImage () , второго холста и свойства imageSmoothingEnabled (en-US) мы способны увеличить изображение и посмотреть его более детально.
Мы получаем положение мыши и обрезаем изображение на 5 пикселей левее и выше и на 5 пикселей правее и ниже положения мыши. Затем мы копируем его на другой холст и изменяем размер изображения до размера, который мы хотим. При масштабировании мы изменяем холст с исходного размера 10×10 пикселей до 200×200.
Поскольку по умолчанию включено сглаживание, мы можем захотеть отключить сглаживание, чтобы увидеть чёткие пиксели. Вы можете переключить флажок, чтобы увидеть эффект свойства imageSmoothingEnabled (которому нужны префиксы для разных браузеров).
Zoom example
Сохранение изображений
HTMLCanvasElement предоставляет метод toDataURL() , который полезен при сохранении изображений. Он возвращает data URI, содержащий представление изображения в формате, заданном параметром type (по умолчанию используется в PNG ). Возвращаемое изображение имеет разрешение 96 точек на дюйм.
Примечание: Имейте в виду, что если холст содержит пиксели, полученные из другого origin без использования CORS, холст будет испорчен, и его содержимое больше не будет считываться и сохраняться. Смотрите Безопасность и испорченные холсты в Allowing cross-origin use of images and canvas canvas.toDataURL('image/png') Настройки по умолчанию. Создаёт изображение в формате PNG. canvas.toDataURL('image/jpeg', quality) Создаёт изображение в формате JPG. Дополнительно вы можете задать параметр "качество" (quality) в диапазоне от 0 до 1, причём единица задаёт лучшее качество и 0 - почти не распознаваемый, но небольшой по размеру файл.
После того как вы создали URI данные из своего холста, вы можете использовать его как источник любого <image> или поместить его в гиперссылку с download attribute, чтобы сохранить его на диске, например.
Существует множество утилит, которые вы можете создать, если сможете извлечь цвет из одного пикселя холста, интерактивного средства выбора цвета и т. Д. Эту задачу относительно легко выполнить с помощью чистого JavaScript без какой-либо библиотеки.
Чтобы извлечь цвет из пикселя определенного холста, мы собираемся:
- Получить местоположение события мыши.
- Используйте координаты, чтобы выбрать данные на холсте.
- Используйте данные RGBA пикселя.
Получение местоположения мыши по событию
Поскольку существует множество возможных ошибок и действий, которые может сделать пользователь, мы должны быть максимально точными, поэтому, чтобы гарантировать, что координаты мыши надежны, мы собираемся извлечь их в соответствии с расположением холста.
Используйте следующую функцию, чтобы получить местоположение элемента (в данном случае холст), он ожидает элемент DOM в качестве первого параметра. Однако эта функция будет внутренне использоваться функцией, которая собирается получить местоположение щелчка.
Предыдущий метод возвращает местоположение (объект с координатами x и y) элемента, заданного в качестве первого параметра (холст в этом случае) в документ.
Теперь, когда мы можем получить местоположение холста, следующий метод будет заботиться о расположении клика. на холсте (или другое событие мыши, прикрепленное к холсту):
Метод getEventLocation возвращает координаты (x, y) в соответствии с событием мыши (щелчок, перемещение мыши и т. Д.), Даже если пользователь увеличивает масштаб документа при использовании getElementPosition увеличивает точность getEventLocation функция.
Нарисуйте изображение на холсте (цель тестирования)
В этой статье предполагается, что вы знаете, как нарисовать изображение на холсте, или у вас уже есть что-то нарисованное с использованием контуров, и поэтому вы хотите получить цвет из пикселя и т. Д. Однако, если у вас ничего нет, вы можете использовать следующую функцию Чтобы нарисовать изображение (из base64 или интернет-ссылки) на холсте:
Получение данных пикселей в соответствии с местоположением
Теперь, чтобы получить цвет из пикселя, мы собираемся использовать метод getImageData из контекста холста, и мы собираемся ограничить его 1 пикселем (x1, y1) в соответствии с местоположением щелчка (или любого события мыши). что вы хотите) событие.
В следующем фрагменте показано, как получить цвет из пикселя в событии щелчка на холсте:
Замечания: вместо этого вы можете использовать прослушиватель событий jQuery, если хотите, только указывайте переменную события.
pixelData является UInt8ClampedArray с 4 предметами ( [0] => red, [1] => green, [2] => blue, [3] => alpha (transparency) ).
То есть манипулируй цветом как хочешь и используй его как хочешь. Вы даже можете преобразовать RGBA в HEX цвет, используя следующий метод:
Поиграйте со следующей скрипкой с приведенным выше кодом. Прикрепленный пример нарисует изображение base64 на холсте, а затем слушатель mousemove будет прикреплен к нему, перейдите на вкладку «Результат» и протестируйте его.
Читайте также: