캔버스

Question

jsfiddle 내부 객체 애니메이션 : http://jsfiddle.net/Z2YSt/173/

코드 :

function createShipMissil(x, y, imgw, imgh) { 
      MissileCtx.save(); 
      MissileCtx.clearRect(0, 0, imgw, imgh); 
      MissileCtx.fillStyle = "rgba(0,200,0,1)"; 
      MissileCtx.fillRect(x, y, imgw, imgh); 
      MissileCtx.restore(); 
      y -= 1; 
      setTimeout(function() { createShipMissil(x, y, imgw, imgh); }, 30); 

     } 

내 문제는 라인을 그릴 때, 그것은 연속 보이는 것입니다. 사각형을 움직이는 것처럼 보이게하려면 어떻게 바꿀 수 있습니까?

Answer 1

대신을 시도해보십시오

MissileCtx.clearRect(x, y, 1, 30); 

Demo

Answer 2

일반적으로 캔버스에 그리는 경우에만 새로운 그래픽을 ADDS로 추가합니다. 애니메이션을 수행하려면 각 프레임의 배경을 지워야합니다.

1. 캔버스
2. 그런 다음 이동하는 모든 개체를 그립니다 (큰 배경 색상 사각형 또는 무엇이든 당신이 원하는 배경을 그릴)을 지 웁니다 은 특히 당신이 반복되는 호출되는 그리기 기능이 필요합니다.

고정 된 시간 간격 (30ms)을 사용하면 다양한 문제가 있습니다. 스택 오버플로 주위를 살펴보고이 프레임 속도를 브라우저 다시 그리기주기와 비교하는 방법을 알아 내면 다양한 문제가 발생합니다.