Метод getImageData() возвращает объект ImageData, который копирует данные пикселей указанного прямоугольника холста.
Примечание. Объект ImageData не является изображением. Он определяет часть (прямоугольник) холста и сохраняет информацию о каждом пикселе внутри прямоугольника.
Для каждого пикселя в объекте ImageData имеется четыре аспекта информации, а именно значение RGBA:
A — альфа-канал (0-255; 0 — прозрачно, 255 — полностью видно)
Информация о цвете/альфа существует в форме массива и хранится в атрибуте данных объекта ImageData.
Совет: После работы с информацией о цвете/альфа в массиве вы можете использовать метод putImageData(), чтобы скопировать данные изображения обратно на холст.
Два кода <!DOCTYPE html><html><head> <meta name=author content=Yeeku.H.Lee(CrazyIt.org) /> <meta http-equiv=Content-Type content=text/html; charset=GBK /> <title> Изменить прозрачность</title></head><body><h2> Изменить прозрачность</h2><canvas id=mc width=600 height=460 style=border:1px Solid black></canvas><script type=text/javascript> // Получаем объект DOM, соответствующий элементу холста var Canvas = document.getElementById('mc'); // Получаем объект CanvasRenderingContext2D для рисования на холсте var ctx = Canvas. getContext('2d'); var image = new Image(); image.src = test.png; Используйте метод с параметрами прозрачности для рисования изображения drawImage(image, 124, 20, 0.4 } var drawImage = function(image, x, y, Alpha) { // Рисуем изображение ctx.drawImage(image, x, y); ); // Получаем данные изображения, начиная с x, y, с шириной image.width и высотой image.height // То есть получаем данные нарисованного изображения var imgData = ctx.getImageData(x, y, image.width, image.height); for (var i = 0, len = imgData.data.length; i < len; i += 4) { // Изменяем прозрачность каждого пикселя imgData.data[i + 3] = imgData.data[i + 3] * альфа } // Возвращаем полученные данные изображения. ctx.putImageData(imgData, x, y) </script></body></html> Три текущих результатаВыше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.