캔버스의 PNG 투명도

캔버스가 PNG 알파를 지원합니까? 캔버스에 추가 한 몇 가지 PNG에 몇 가지 문제가 있습니다. 이미지의 가장자리는 알파 채널이 없거나 인식되는 것처럼 검은 색과 울퉁불퉁합니다.캔버스의 PNG 투명도

출처

2011-01-13 Rigil

1 비트 투명도로 8 비트 PNG를 저장하고 있으므로 검은 색으로 혼합되어있는 것 같습니다. 문제를 일으키는 파일 중 하나를 공유 할 수 있습니까? – Phrogz

알파가 포함 된 24 비트 PNG를 캔버스에 넣으면 이해합니다.

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images

아마 당신의 PNG 파일이 깨끗하지 , 즉 국경에서 투명하지 않은 지역이?

출처

2011-01-13 09:41:38 oberhamsi

언급하는 것을 잊어 버렸습니다. processing.js 라이브러리를 사용하여 이미지를 표시하고 있습니다. 필자는 문서를 살펴 봤는데 PNG가 지원된다는 것을 언급하지 않았으므로 나는 운이 좋다는 것을 추측한다. – Rigil

@ Rigil 매우 희박한 것 같습니다. – Phrogz

@Phrogz 프레임 속도가 너무 높아졌다는 것을 알았고 클릭 할 때마다 초당 30 프레임의 PNG를 만들어 서로 겹쳐서 뾰족한 가장자리 모양을 만들어 냈습니다. – Rigil

requestAnimationFrame 또는 setInterval 루프에서 PNG 이미지를 다시 그리기 전에 clearRect() 또는 fillRect()을 사용하십시오.

나는 비슷한 문제가있어서이 질문에 비틀 거 렸지만 이미지는 이미 24 비트였습니다. PNG 이미지를 캔버스로 다시 그리는 requestAnimationFrame 루프가 있고 겹친 것처럼 (말했듯이) 그 결과는 알파 페이드 아웃 투명성을 가져야하는 "구운"가장자리였습니다.

drawImage를 호출하기 전에 영역을 정리하기 만하면 이미지 자체가 렌더링되지 않도록 할 수 있습니다.

출처

2017-07-26 14:27:38 adrield

캔버스의 PNG 투명도

답변

관련 문제