O método getImageData() retorna um objeto ImageData, que copia os dados de pixel do retângulo especificado da tela.
Nota: O objeto ImageData não é uma imagem. Ele especifica uma parte (retângulo) da tela e salva as informações de cada pixel dentro do retângulo.
Para cada pixel no objeto ImageData, existem quatro aspectos de informação, nomeadamente o valor RGBA:
A - canal alfa (0-255; 0 é transparente, 255 é totalmente visível)
As informações de cor/alfa existem na forma de uma matriz e são armazenadas no atributo data do objeto ImageData.
Dica: Depois de operar nas informações de cor/alfa no array, você pode usar o método putImageData() para copiar os dados da imagem de volta para a tela.
Dois códigos<!DOCTYPE html><html><head> <meta name=author content=Yeeku.H.Lee(CrazyIt.org) /> <meta http-equiv=Content-Type content=text/html charset=GBK />; <title> Alterar transparência</title></head><body><h2> Alterar transparência</h2><canvas id=mc width=600 height=460 style=border:1px solid black></canvas><script type=text/javascript> // Obtém o objeto DOM correspondente ao elemento canvas var canvas = document.getElementById('mc'); // Obtém o objeto CanvasRenderingContext2D para desenhar na tela var ctx = canvas.getContext('2d'); var imagem = new imagem(); Use o método com parâmetros de transparência para desenhar a imagem drawImage(image, 124, 20, 0.4 } var drawImage = function(image, x, y, alpha) { // Desenhe a imagem ctx.drawImage(image, x, y); ); // Obtenha os dados da imagem começando em x, y, com largura de image.width e altura de image.height // Ou seja, obtenha os dados da imagem desenhada var imgData = ctx.getImageData(x, y, image.width, image.height); for (var i = 0, len = imgData.data.length; i < len; i += 4) { // Altera a transparência de cada pixel imgData.data[i + 3] = imgData.data[i + 3] * alpha } // Coloca de volta os dados da imagem obtidos. ctx.putImageData(imgData, x, y }</script></body></html>);Três resultados em execução
O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.