새 캔버스에 대한 최초 drawImage 호출이 IE9에서 느립니다.

Question

설명하거나 수정할 수없는 drawBuffer 함수에서 이상한 동작을 발견했습니다. 따라서 누군가 나를 도울 수 있는지 확인하십시오.

기본적으로이 함수는 여러 이미지가 포함 된 이미지에서 버퍼 캔버스를 그립니다. 대부분의 브라우저에서 이것은 매력처럼 작동하며 밀리 초 내에 버퍼 캔버스를 채 웁니다. 하지만 IE9에서는 버퍼 캔버스에 처음으로 그릴 때 약 10 밀리 초가 소요된다는 것을 알게되었습니다. 그리고 30fps에서 실행해야하므로 내 응용 프로그램이 느려집니다.

나는 첫 번째 추첨에만 10 밀리 초가 걸린다고 증명했습니다. 내 코드를 실행하면 첫 번째 직후에 두 번째 drawImage 호출이 있고 두 번째 drawImage 호출은 0 밀리 초가지나갑니다.

UiElement.prototype.drawBuffer = function() { 

if(!this.bufferCanvas || !this.bufferContext) { 
    this.bufferCanvas = document.createElement('canvas'); 
    this.bufferCanvas.width = this.sprite.getWidth(); 
    this.bufferCanvas.height = this.sprite.getHeight(); 
    this.bufferContext = this.bufferCanvas.getContext('2d'); 
} else { 
    this.bufferContext.clearRect(0, 0, this.bufferCanvas.width, this.bufferCanvas.height); 
} 

var image = this.sprite.getImage(); 
var startx = this.sprite.getStartX(this.spriteFrame); 
var starty = this.sprite.getStartY(this.spriteFrame); 

var width = this.sprite.getWidth(); 
var height = this.sprite.getHeight(); 

this.bufferContext.clearRect(0, 0, this.bufferCanvas.width, this.bufferCanvas.height); 
this.bufferContext.drawImage(
      image, 
      startx, 
      starty, 
      width, 
      height, 
      0, 
      0, 
      width, 
      height 
     ); 

// 2nd draw is here only for debug purposes 

this.bufferContext.drawImage(
      image, 
      startx, 
      starty, 
      width, 
      height, 
      0, 
      0, 
      width, 
      height 
     );} 

그래서 정리해 : 캔버스 만들기 - 에선 0ms

1의 drawImage - 10ms의 (WTH?)

2의 drawImage - 에선 0ms

을 캔버스을 자극 할 수있는 방법이 있나요 그녀가 저 주먹 이미지를 더 빨리 그릴 수 있도록 g-spot?

Answer 1

같은 문제가 발생했습니다.

IE가 이미지를 다시로드해야하는 것처럼 보입니다. 충분히 자주 사용하지 않으면 ... DOM에 첨부 된 이미지를 그대로두고 도움이되는지 확인하려고합니다.