HTML 5 캔버스 이미지 특수 효과

Question

2 차원 타일 기반의 HTML5 캔버스 응용 프로그램에서 작업하고 있는데 어떤 종류의 특수 효과를 이미지에 적용 할 수 있는지 알고 싶습니다 (context.drawImage (...))). 내가 만난 유일한 트릭은 canvas.globalAlpha 값을 수정하는 것입니다. 이렇게하면 이전 프레임의 색상이 일부 남아있어 캔바스 객체의 내용이 프레임간에 이동하는 경우 흐려 지거나 흐릿한 효과가 발생합니다.

기본 도형의 ARGB 값으로 context.fillStyle을 설정하는 것과 비슷한 이미지 렌더링을위한 것이 있습니까?

곱셈 모드가 있습니까? 즉, 이미지 픽셀 색상에 대상 색상을 곱하십시오. 이것은 원시 조명에 사용될 수 있습니다. (context.globalCompositionOperation을 가지고 놀았지만 재미있는 것을 찾지 못했습니다.)

다른 멋진 효과가 있습니까?

참고 :이 응용 프로그램에 WebGL을 사용하고 싶지 않습니다. 게임입니다. 그것은 실시간이며, 너무 오랜 시간이 걸리기 때문에 자바 스크립트 코드로 각 픽셀을 수정할 수 없다는 것을 의미합니다. (플레이어가 죽었을 때 아무 것도 움직이지 않을 때도 가능할지라도)

Answer 1

Canvas는 사전 정의 된 효과를 제공하지 않습니다. 이미지 모양을 조작하려면 행렬 변환을 사용할 수 있습니다.
이미지 픽셀과 색상을 조작하려면 getImageData 메서드 (http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#pixel-manipulation)를 사용해야합니다. 그런 다음 Google을 사용하여 소용돌이, 흐림, 돋을 새김 등의 효과를 적용하는 알고리즘을 찾으십시오.