캔버스 기반 배경 이미지

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

배경 이미지에 애니메이션을 적용하는 주요 방법은 두 가지가 있습니다.

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을 배경으로 사용

잠시만요. Webgl을 사용하여 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의 스냅샷 이미지에 대한 전체 액세스 권한이 있으면 보안 문제가 있습니다. 다른 브라우저에서는 이 기능이 채택되지 않은 주된 이유입니다.