캔버스의 한 요소에 대해서만 페이드 효과가 적용됩니까?

-3

캔버스의 한 요소에서만 페이드 인 페이드 효과를 만들 수 있습니까? 전체 캔버스가 아닌가요? 나는 몇 가지 해결책을 보았지만 전체 캔버스 만 색이 바래다. 그리고이 효과는 작은 원에만 적용해야합니다.캔버스의 한 요소에 대해서만 페이드 효과가 적용됩니까?

캔버스는 WebGL 요소입니다. html 요소를 포함하지 않습니다. 따라서 DOM에서 html 요소에 액세스 할 수 없습니다. 따라서 DOM 조작으로 페이드 인 및 페이드 아웃 효과를 만들 수는 없습니다. 캔버스 객체를 애니메이트해야합니다. –

캔버스의 작은 부분 만 애니메이션으로 표현할 수 없습니까? –

DOM 조작을위한 함수 대신에 프레임별로 애니메이션 프레임을 직접 그릴 수 있습니다. – Kristaps

난 당신이 자바 스크립트 캔버스 API를 찾고 생각

를 사용하여, 당신은 캔버스에 래스터 모양을 그릴 수 있으며 ctx.globalAlpha와 개별적으로 페이드 아웃 할 수 있습니다. MDL에는 많은 자습서가 있습니다.

또 다른 옵션은 svg 요소을 사용하는 것으로, 페이드 아웃 될 수도 있지만 CSS 애니메이션이 있습니다. 여기에 대한 튜토리얼을 찾았습니다 : codepen.io/gregh/post/create-svg-game-coloron.

2017-12-02 13:28:46

캔버스에 페이딩 요소를 추가 할 수는 있지만 문제는 페이드 아웃하지 않을 것입니다. 페이드 인하려면 (다른 레이어를 추가하기 만하면됩니다.)하지만 페이드 아웃 방법, 제거 방법은 모르겠다. 레이어 하나씩 –

여기에 귀하의 질문을 이해할 수 없습니다. 캔버스 ** 모양 ** 또는 HTML ** 요소 **를 사용하고 있습니까? –

캔버스 모양을 사용하고 있는데, 기존의 레이어에 새로운 레이어를 추가하기 만하면 페이드 인 효과를 낼 수 있습니다. 페이드 아웃처럼 보이지만 페이드 아웃으로 설정할 수 없습니다. how –

답변