캔버스 기반 배경 이미지

프로그래매틱 방식으로 배경 이미지 애니메이션 적용

배경 이미지를 애니메이션 처리하는 주요 방법에는 두 가지가 있습니다.

  1. CSS 스프라이트를 사용하여 JS에서 background-position를 업데이트합니다 .
  2. .toDataURL()을 사용한 해킹

첫 번째 방법은 이미지가 미리 준비되어 있는 경우에 적합하지만, 소스를 프로그래매틱 방식으로 생성해야 하는 경우(예: <canvas> 사용)에는 어떻게 해야 할까요? 1번 문제의 해결책은 캔버스에서 .toDataURL()를 사용하고 배경을 생성된 URL로 설정하는 것입니다.

while(1) {
    var url = canvas.toDataURL('image/jpeg');
    el.style.background = 'url(' + url + ')';
}

이 방법에는 두 가지 문제가 있습니다.

  1. data: URL은 결과 이미지에 약 33% 의 크기 오버헤드를 추가합니다.
  2. DOM 터치 (el.style)가 많습니다.

이 두 가지 방법은 모두 비효율적이며 항상 부드러운 60fps 웹 앱에는 적합하지 않습니다.

2D 캔버스를 배경으로 사용

캔버스를 배경으로 사용 데모
데모

알고 보니 WebKit에 수년 동안 있었던 비표준 API가 캔버스를 배경의 소스로 사용할 수 있습니다. 하지만 아쉽게도 이 기능에 대한 게시된 사양은 없습니다.

먼저, 뒷면의 URL을 지정하는 대신 다음을 실행합니다.

.bg {
    background: url(bg.png) no-repeat 50% 50%;
}

문자열 식별자를 캔버스 컨텍스트에 참조하는 -webkit-canvas()를 사용합니다.

.canvas-bg {
    background: -webkit-canvas(animation) no-repeat 50% 50%;
}

다음으로 특수 버전의 .getContext()로 2D 컨텍스트를 만들어야 합니다.

var ctx = document.getCSSCanvasContext('2d', 'animation', 300, 300);

Dave Hyatt의 추가 정보:

애니메이션

데모에서 볼 수 있듯이 requestAnimationFrame()을 재사용하여 애니메이션을 실행할 수 있습니다. 이렇게 하면 연결이 설정된 후 CSS와 캔버스 요소 간의 연결이 유지되므로 유용합니다. DOM을 조작할 필요가 없습니다.

Chrome에서 데모가 애니메이션으로 표시되지 않나요?

현재 Chrome 안정화 버전 채널 (버전 23)에는 crbug.com/161699가 있어 requestAnimationFrame() 애니메이션이 배경을 올바르게 업데이트하지 못합니다. 이 문제는 Chrome 25 (현재 Canary)에서 해결되었습니다. 데모도 현재 Safari에서 잘 작동해야 합니다.

성능 이점

여기서는 캔버스를 말하는 것입니다. 이제 하드웨어 가속 애니메이션이 완전히 작동합니다 (이 기능이 작동하는 브라우저의 경우). 다시 말씀드리지만 JS에서 DOM을 조작할 필요가 없습니다.

WebGL을 배경으로 사용

잠시만요. 웹gl을 사용하여 CSS 배경을 구동할 수 있다는 뜻인가요? 물론입니다. WebGL은 캔버스의 3D 컨텍스트일 뿐입니다. '2d' 대신 'experimental-webgl'을 사용하면 됩니다.

var gl = document.getCSSCanvasContext('experimental-webgl', 'animation', 300, 150);

다음은 정점 및 프래그먼트 셰이더를 사용하여 배경이 그려진 div가 포함된 개념 증명입니다. 데모

기타 접근 방식

Mozilla는 꽤 오랫동안 -moz-element() (MDN)을 사용해 왔습니다. 이는 CSS 이미지 값 및 대체 콘텐츠 모듈 수준 4 사양의 일부이며 동영상, 캔버스, DOM 콘텐츠 등 원하는 HTML에서 생성된 이미지를 만들 수 있습니다. 하지만 DOM의 스냅샷 이미지에 대한 전체 액세스 권한이 있으면 보안 문제가 발생할 수 있습니다. 이러한 이유로 다른 브라우저에서는 해당 기능을 채택하지 않았습니다.