иллюстрировать
Сила тега элемента canvas заключается в том, что он может напрямую выполнять графические операции в HTML, что имеет большую прикладную ценность.
Canvas может реализовать манипулирование изображениямиманипулирование пикселями, что значитgetImageData()метод.
объяснять
CanvasRenderingContext2D.getImageData()вернутьImageDataОбъект, используемый для описания скрытых пиксельных данных области холста.Эта область представлена прямоугольником, начальной точкой (sx, sy), шириной sw и высотой sh.
грамматика
ctx.getImageData(sx, sy, sw, sh);
параметр
sx: Координата x левого верхнего угла прямоугольной области данных изображения, которые необходимо извлечь.
sy: Y-координата левого верхнего угла прямоугольной области данных изображения, которые необходимо извлечь.
sw: ширина прямоугольной области данных изображения, которые необходимо извлечь.
sh: высота прямоугольной области данных изображения, которые необходимо извлечь.
возвращаемое значение
ОдинImageDataОбъект, содержащий данные изображения прямоугольника, заданные холстом.
ImageDataОбъект будет иметь три свойства,height,widthа такжеdata.
ImageData.height
Описывает фактическую высоту ImageData в пикселях, которая фактически равнаgetImageData()параметры в методеsh
ImageData.width
Описывает фактическую ширину ImageData в пикселях. Это значение фактически равноgetImageData()параметры в методеsw
ImageData.data
Одномерный массив, содержащий данные в порядке RGBA, представленные целыми числами от 0 до 255 (включительно).
Уведомление
Ошибка будет выдана, если переменные высоты (sh) или ширины (sw) равны 0.
Пример
Вышеизложенное является базовыми знаниями, которые вам необходимо знать, давайте рассмотрим несколько примеров!
палитра цветов
визуализация
Реализовать идеи
1. Сначала нарисуйте картину на холсте,
2. Получить координаты при движении мыши и пройтиgetImageData()метод, получить пиксель этой точки,
3. Получив информацию о пикселях, сваркаrgbaстроку, а затем установите фон маленького квадрата ниже на этот цвет.
код, пожалуйста, нажмитездесь
Изображение в оттенках серого
визуализация
Реализовать идеи
1. Сначала нарисуйте картину на холсте,
2. ПройтиgetImageData()метод для получения информации о пикселях на всем холсте,
3. Нажав кнопку, пройдите значение красного, зеленого и синего цвета каждого пикселя полученной информации о пикселях, добавьте их, чтобы получить среднее значение, а затем назначьте среднее значение красному, зеленому и синему. оттенки серого каждого пикселя,
4. Затем поместите измененную информацию о пикселях черезputImageData()Метод повторно добавляется на холст для достижения эффекта оттенков серого на изображении.
код, пожалуйста, нажмитездесь
В дополнение к эффекту оттенков серого изображений, поскольку видео также можно разместить на холсте, эффекты оттенков серого также могут быть достигнуты для видео.Принцип тот же, и операция фактически такая же.Многие изображения имеют эффект оттенков серого.
визуализация
код, пожалуйста, нажмитездесь
частицы текста
визуализация
Реализовать идеи
Не будем говорить о том, как добиться конечного эффекта анимации, а сначала подумаем, как получить координаты всех пикселей текста на холсте.
1. Сначала получите информацию о пикселях текста на холсте
- 1.1 Сначала заполните белый прямоугольник на холсте
- 1.2 Используйте красный цвет для написания текста на холсте
- 1.3 Получить информацию о пикселях холста ImageData
- 1.4 Очистить весь холст
- 1.5 Найдите красные пиксели в ImageData, запишите их координаты x и y, координаты каждого найденного пикселя сохраняются в объекте (Dot), а все объекты хранятся в массиве (dotList) в ,
Скорость компьютера очень высока, поэтому пользователь не может видеть красный текст. Если вы считаете, что этот метод не подходит, вы также можете использовать холст для получения текстовых пикселей. Пользователь не должен видеть холст.
Мы знаем информацию о пикселях текста и координаты каждого пикселя, мы можем добиться различных эффектов, как эффект в примере, просто изменив значение координаты x.
2. Перейдите массив (dotList), который сохраняет текстовые пиксели. Каждый объект пикселя (Dot) также имеет атрибут nowX. Начальное значение равно 0. Каждый раз, когда рисуется последняя точка, этот атрибут используется как координата x круг. , свойство nowX продолжает увеличиваться до тех пор, пока не сравняется со значением свойства x объекта пикселя (точка) и не остановится.
код, пожалуйста, нажмитездесь
у меня тоже такой эффектОсновы холста — анимация частиц, часть 3Как видно в этой статье, автор написал очень хорошо, рекомендую к прочтению.
На гитхабе тоже есть хороший проектshape-shifter, вы можете узнать.
Рассчитать количество и площадь графики на картинке
вопрос
На плоскости есть несколько неопределенных фигур, как показано на рисунке ниже. Пожалуйста, напишите программу для определения количества объектов и площади каждого отдельного объекта.
визуализация
Реализовать идеи
1. Создайте двумерный массив (координаты), в котором хранятся пиксельные точки изображения.На рисунке всего два цвета, один цвет для пустой области и один цвет для области формы.Пиксели в пустой области отмечены как 0, а область формы отмечена как 1, аналогично следующему, поэтому
0,0,0,0,0,0,0,0,0,0,0,0
0,0,1,1,1,0,0,0,0,0,0,0
0,1,1,1,1,0,0,0,0,0,0,0
0,1,1,1,0,0,0,1,1,1,1,0
0,0,0,0,0,0,1,1,1,0,0,0
0,0,0,0,0,0,1,1,1,0,0,0
0,0,0,0,0,0,0,0,0,0,0,0
2. Чтобы вычислить, сколько существует фигур, нам нужно посмотреть, сколько последовательных блоков 1 находится в двумерном массиве.Чтобы вычислить площадь фигуры, нам нужно вычислить, сколько 1 есть в массиве блок последовательных единиц. Это черезрекурсивный алгоритм поиска с возвратомвычислять.
Алгоритм поиска с возвратом на самом деле представляет собой процесс попытки поиска, аналогичный перечислению. В основном он предназначен для поиска решения проблемы в процессе попытки поиска. Когда обнаруживается, что условия решения не удовлетворены, он «возвращается» и возвращается, чтобы попробовать другой дорожка.
Метод поиска с возвратом — это метод оптимального поиска, который осуществляет поиск вперед в соответствии с оптимальными условиями для достижения цели. Однако, когда исследование достигает определенного шага и обнаруживается, что первоначальный выбор не оптимален или цель не может быть достигнута, оно делает шаг назад и делает новый выбор.
код, пожалуйста, нажмитездесь
вот одинПример, показывающий, как найти эти фигуры с помощью поиска с возвратом.
Этот пример исходит изАлгоритмический вопрос в предварительном интервью (ответ с использованием холста)Эта статья, статья тоже очень хорошая, рекомендуется к прочтению
Суммировать
использоватьgetImageData()метод рассмотрения двух вопросов
1. Междоменные проблемы
getImageData()Метод не позволяет работать с ресурсами изображений, отличными от этого доменного имени, поэтому, если вы хотите попробовать пример в статье локально, вы получите ошибку, если напишете путь к изображению напрямую.
Однако вы можете преобразовать изображение в кодировку base64 и напрямую назначить кодировку base64 атрибуту src изображения, чтобы просто решить эту проблему. Этот метод подходит только для изображений, если это видео, оно все равно требует сотрудничества с сервером. Подробнее см. в этой статье.Решить междоменную проблему изображения холста getImageData, toDataURL
2. Проблемы с производительностью
getImageData()Метод вообще получает много информации о пикселях, поэтому необходимо учитывать вопрос производительности.Что касается того, как его оптимизировать, то это зависит от конкретной сцены.Например, в примере с эффектом частиц текста в тексте вы может использовать его в первую очередь.measureText()Метод вычисляет ширину текста в сочетании с fontSize, чтобы узнать, в какой области находится текст, просто проведите пиксели текста через эту область блока.
getImageData()Метод, суммированный в одном предложении, заключается в получении информации о пикселях на холсте.Различные эффекты, полученные в этой статье, будь то простые или сложные, связаны с манипулированием пикселями.
пройти черезgetImageData()метод, есть много вещей, которые можно сделать, гораздо больше, чем упомянуто в статье, например, реализовать другиеэффект фильтра, в тексте упоминается только градация серого, также можно добиться инверсии, размытия, тиснения и т.д. В тексте реализован эффект частиц текста, собственно, на картинке тоже можно добиться эффекта частиц, кроме того, есть много интересного, но я мало знаю об этом, поэтому я мало знаю.
Наконец, если в тексте есть недостатки или ошибки, пожалуйста, укажите на мелких партнеров, большое спасибо.
Ссылаться на
Основы холста — анимация частиц, часть 3
Алгоритмический вопрос в предварительном интервью (ответ с использованием холста)
решение проблем с литкодом (рекурсия и возврат)