웹킷이 캔버스의 큰 이미지에 뒤처짐

Question

웹킷 (크롬/사파리)과 캔버스에 큰 이미지가있는 문제가 있습니다.

내 고객은 캔버스에 프레임 당 80ms의 변화하는 이미지로 애니메이션 인트로 영화를 작성해야했습니다.

130 프레임이 있으며 페이지의 단일 요청로드를 줄이기 위해 단일 이미지를 4 개의 스프라이트에 넣어야했습니다.

모든 스프라이트 크기는 약 2,5MB이며 필요한 프레임 부분 만 잘라냅니다. 지금까지 그렇게 가능합니다.

많은 코드로 귀찮게하지 않으려 고합니다. . 그러나 결국 그것은 단지 관하여 : img.width-1,

이 $ context.drawImage (IMG, 0, 최고 (img.height/sequenceCount) -1, 0, 0,이 $. canvas.width, this. $ canvas.height);

마녀를 80ms 시간 초과라고합니다.

우리는 그렇게했으며 모든 주요 브라우저에서 작동합니다. 하지만 웹킷을 사용하면 다음 스프라이트를 변경할 때마다 약 400ms의 지연이 발생합니다.

같은 문제는 IE9으로했지만, 이것은

는

if (Browser.ie9) { 
     for(var x = 0; x < this.sequence[0].sprites.length; x++){     
      this.draw(this.sequence[0].sprites[x].obj, 0, 1); 
     }     
     this.$context.clearRect(0, 0, this.$canvas.width, this.$canvas.height); 
    } 

처음에 한번 스프라이트 드로잉 고정 될 수있다 (연신 기능은 이전 실시 예에서 단지의 drawImage 기능을 포함한다.)

하지만 웹킷 브라우저를 사용하면 약 400ms의 지연 시간을 갖게됩니다.

예, 이미지가 사전로드됩니다. 그래서 이것은 문제가되지 않습니다.

어떤 아이디어일까요?

도움 주셔서 감사합니다.

Answer 1

캔버스 나 이미지 너비가 생길 때마다 일반적으로 JS 메모리에 액세스하는 것보다 느린 DOM에 액세스하고 있습니다. 이러한 값을 크기 조정에 저장하고 저장된 값을 대신 사용하면 성능이 향상 될 수 있습니다.

var canvasWidth, canvasHeight, imgWidth, imgHeight;