작은 비트 맵을 <canvas>에 여러 번 그립니다.

Question

저는 gwt를 사용하여 캔버스에 그립니다. 각 마우스 이동 화면에서 40 x 40 픽셀의 비트 맵을 화면에 50 번 그립니다. 다음과 같이 표시됩니다.

void onDraw() { 
    for (int x = 0; x < 10; x++) { 
     for (int y = 0; y < 5; y++) { 
      canvasContext.drawImage(srcImage, x, y, ...); 
     } 
    } 
} 

이것은 데스크톱 브라우저 및 iphone/ipad에서 놀랍도록 잘 수행됩니다. 안드로이드에서는 기본적으로 사용할 수 없으며 약 2fps로 크롤링합니다.

안드로이드에서 효율적으로 작은 비트 맵을 그리는 효율적인 방법이 있는지 궁금합니다. 나는 몇 가지 트릭을 시도했지만 아무 것도 향상되지 않습니다. 안드로이드 브라우저 구현은 실제로 ios에 비해 뒤떨어져 있습니까?

감사

Answer 1

이 어떤 이유로 캔버스에 직접 그리기 그냥 안드로이드 몰락이다. 당신이 정말로 멀리 뒤에 드로이드 시차를 볼 수 있습니다로 추가 성능을

Html5 canvas animation slow on Android

일부 디바이스 정보를 참조하십시오

http://www.html5rocks.com/en/mobile/touch/#toc-foo

장치에 의해 일부 성능은

http://www.scirra.com/blog/85/the-great-html5-mobile-gaming-performance-comparison

벤치 마크.

일부 문제는 캔버스에 직접 그리기보다는 엔티티에 애니메이션이 적용된 div 셀을 사용하여 실험하는 것이 좋습니다. 자신을 실험하지는 않았지만 실적이 더 좋을 수 있습니다.

또한 마우스 이동을 트러 울리려고 시도합니다. 실제로 프레임 당 한 번 더 복잡하게 그려지는 많은 마우스 이동 이벤트를 발생시키는 것으로 판단됩니다. 타이머마다 관리되는 프레임마다 한 번만 호출되는 업데이트 기능이 있어야합니다. 그런 다음 이동해야하는 조건이 충족되면 업데이트가 사각형을 업데이트해야합니다. 오히려 마우스를 움직이는 이벤트를 기반으로 다시 그리기를 시도합니다. 업데이트 기능은 마우스의 좌표를 잡고 사각형 객체의 위치를 ​​업데이트해야합니다. 그리고 지금은 그 일부 빈민가 사이비 코드이지만 개체를 ​​렌더링되는 방법을 먹으 렴 알고 실제로 화면

init { //called once on load 
    create array of rectangles 50, with default coordinates 
} 
update { //called once per frame 
    get coordinates of mouse 
    iterate though array of rects and update coordinates based on mouse position 
} 
draw { //called after update 
    iterate though array of rects and draw them 
} 

timer { //manages your fps and calls update and draw 
    update() 
    draw() 
}.scheduleRepeating(1000ms/fpsRate) 

에 렌더링하는 바로 업데이트 기능 후라고 드로우 기능을 가지고있다. 또한가 ... 그 inefficent 매우 나쁜 이잖아 대신

for(int i =0;i < rectArr.length; i++) { 
    x = i%10 * rectW 
    y = i%5 * rectH 
} 

뉴 웨이즈 행운

을 변조을 일을해야에 대한 중첩하지 a를 할