1. 홈
  2. 질의 응답
  3. 캔버스에서 애니메이션을 최적화하는 방법은 무엇입니까? HTML 5

캔버스에서 애니메이션을 최적화하는 방법은 무엇입니까? HTML 5

2011-09-12 5 views
4

다양한 그림이 왼쪽, 오른쪽, 위, 아래로 움직이므로 캔버스에서 애니메이션 속도가 느려지는 문제가 있습니다. 애니메이션을 최적화하는 방법에 대한 조언이 필요합니다.캔버스에서 애니메이션을 최적화하는 방법은 무엇입니까? HTML 5

모든 주요 브라우저, 특히 Chrome, Firefox 및 Internet Explorer에서 애니메이션이 작동하는 것이 중요합니다.

애니메이션을 최적화 할 수 있습니까? 그림에 지체를 넣을 수 있습니까? 미리 감사드립니다.

출처

2011-09-12 Michael V.

+0

캔버스 애니메이션에 사용하는 코드를 게시 할 수 있습니까? – jon3laze

답변

3

자바 스크립트에서 setInterval 및 setTimeout 함수를 사용하여 지연을 생성하고 프레임 속도를 조절할 수 있습니다.

function draw(){ 

     var canvas = document.getElementById('myCanvas'); 
     //create the image object 
     var img = new Image(); 
     //set the image object's image file path 
     var img.src = "images/myImage.png" 
     //check to see that our canvas exists 
     if(canvas.getContext) 
     { 
      //grab the context to draw to. 
      var ctx = cvs.getContext('2d'); 
      //clear the screen to a white background first 
      //NOTE to make this faster you can clear just the parts 
      //of the canvas that are moving instead of the whole thing 
      //every time. Check out 'Improving HTML5 Canvas Performance' 
        //link mention in other post 
      ctx.fillStyle="rgb(255,255,255)"; 
      ctx.fillRect (0, 0,512, 512); 

      //DO ALL YOUR DRAWING HERE.... 

      //draw animation 
      ctx.drawImage(img, 0, 0); 
     } 
     //Recalls this draw update 30 times per second 
     setTimeout(draw,1000/30); 
}

이것은 당신이 애니메이션이 가지고 얼마나 많은 처리 시간을 제어하는 ​​데 도움이됩니다 : 당신은 다음과 같습니다 몇 가지 코드를 가질 수 드로잉 루프 약 30 FPS를 만들고 싶었다 경우 예를 들어

. 따라서 애니메이션이 너무 느린 경우 분모 '30'을 '60 'fps 또는 프로그램에서 실제로 잘 작동하는 것으로 변경하여 프레임 속도를 높일 수 있습니다.

최적화가 setTimeout()에 추가되는 한 애니메이션을 그리는 방법 또한 중요합니다. 이것을 렌더링하기 전에 모든 이미지를로드하려고 시도하는 것을 "프리 로딩"이라고합니다.

이 
var loadedImages = new Array(); 
loadedImages[0] = new Image(); 
loadedImages[0].src = "images/animationFrame1.png"; 
loadedImages[1] = new Image(); 
loadedImages[1].src = "images/animationFrame2.png"; 
loadedImages[2] = new Image(); 
loadedImages[2].src = "images/animationFrame3.png"; 
loadedImages[3] = new Image(); 
loadedImages[3].src = "images/animationFrame4.png";

당신이 경우 해시에 넣어도 수 : 각 애니메이션 셀에 대해 서로 다른 이미지의 무리가있는 경우 그 다음 이미지의 배열로 드로우 기능 부하 모든 이미지를 너무 좋아 호출하기 전에이다 이 앱 말이 어디 대신

loadedImages[0] = new Image(); 
loadedImages[0].src = "images/animationFrame1.png";

당신이 할이

loadedImages['frame1'] = new Image(); 
loadedImages['frame1'].src = "images/animationFrame1.png";

당신은 일단 모든 이미지는 당신이 그렇게처럼 호출 수행하여 그리기 위해 그들을 참조로드 :

이미지를로드하여 렌더링하는 동안 당신이 일을로드하는 경우 애니메이션이 느려지 며, 따라서 많이 사용하는 프로세스이기 때문에 당신은 당신의 렌더링 프로세스에서로드 프로세스를 분리 할 
//Using the integer array 
ctx.drawImage(loadedImages[0], 0, 0); 
//OR 
//Using the stringed hash 
ctx.drawImage(loadedImages['frame1'], 0, 0);

.

렌더링하는 동안 아무 것도로드 할 수 없다는 것을 의미하는 것이 아니라, 애니메이션 속도가 느려지는 것을 양심으로 표현하는 것입니다.

Here은 이미지를 미리로드하는 것에 대한 글입니다.만 지우고 다시 그리기에 here

참고 녹색으로 게시 link 확인 응답 모든 브라우저에서 확인하고 있습니다 주목해야 할

다른 것들에 대한 일관성있는 애니메이션 속도를 말한다 여기에 또 다른 게시물이

HTML 5 캔버스 최적화를 사용하여 게시물에서 언급 한 경계 상자. 이 링크에는 캔버스 애니메이션을 개발하는 동안 양심의 가책이 있습니다.

Here은 다른 엔진이하는 일과 교차 비교하기에 편리 할 수있는 프레임 작업입니다.

일부 도움이 되길 바랍니다. 나는 JavaScript에 처음이다. (약 2 주 전에 코딩을 시작했다.) 그래서 더 나은 방법으로 일을 할 수 있었지만 지금까지 발견 한 것들이다.

출처

2011-09-13 01:46:42 vternal3

관련 문제

 관련 문제