getImageData() 메서드는 캔버스의 지정된 사각형의 픽셀 데이터를 복사하는 ImageData 객체를 반환합니다.
참고: ImageData 객체는 이미지가 아닙니다. 캔버스의 일부(사각형)를 지정하고 직사각형 내의 각 픽셀 정보를 저장합니다.
ImageData 개체의 각 픽셀에는 정보의 네 가지 측면, 즉 RGBA 값이 있습니다.
A - 알파 채널(0-255, 0은 투명, 255는 완전히 표시됨)
색상/알파 정보는 배열 형태로 존재하며 ImageData 객체의 data 속성에 저장됩니다.
팁: 배열의 색상/알파 정보에 대해 작업한 후 putImageData() 메서드를 사용하여 이미지 데이터를 캔버스에 다시 복사할 수 있습니다.
두 개의 코드 <!DOCTYPE html><html><head> <meta name=author content=Yeeku.H.Lee(CrazyIt.org) /> <meta http-equiv=Content-Type content=text/html /> <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() = 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] * alpha } // 얻은 이미지 데이터를 다시 넣습니다. ctx.putImageData(imgData, x, y) }</script></body></html> 세 가지 실행 결과위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.