HTML5 캔버스의 이미지가 한 프레임에만 표시됩니다.

Question

오랜 시간 lurker이지만 계정을 만들지 않았습니다. 그냥 데브가 아니라 재미 있고 재미있는 실험을 해보고 싶다. 그래서 내가 정말로 바보 같으면 사전에 사과한다.

트위터 스트리밍을위한 동적 오버레이에서 작업 중이며 이전에 AS3을 사용하고 있었지만 지금은 HTML5로 전환했습니다. 캔버스에 이미지를로드하려고합니다. (결국 Twitch API를 사용하여 가져온 프로필 사진이됩니다 ... 한 번에 한 단계 씩). 나는 어도비 애니메이션을 사용하고 있는데 나는 지금까지 레이어의 첫 번째 프레임 액션에 적용되는 다음과 같은 한 :

var canvas = document.getElementById('canvas'), 
    context = canvas.getContext('2d'); 

show_image(); 

function show_image() { 
    source_image = new Image(); 
    source_image.src = 'https://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png'; 
    source_image.onload = function() { 
     context.drawImage(source_image, 100, 100); 
    } 
} 

내가 Ctrl 키를 입력하고 크롬에서 볼 명중하면 이미지가 첫 번째 프레임 나타납니다 그런 다음 사라집니다. 나는 그것이 어떻게 무기한으로 머무르게 될지 확신하지 못한다. 나중에 애니메이션을 적용 할 수 있어야합니다. 최신의 팔로 잉/기부/하위 등에 따라 바뀔 것입니다.

타임 라인에서 프레임 자체를 확장하려고 시도했지만 시간이 오래 걸렸습니다. 반복하여 이미지 자체를 오래 머물게하지 않았습니다. 나는 아마 정말 간단한 것을 놓치고있을거야!

도움을 주시면 감사하겠습니다. 감사!

Answer 1

HTML과 JS가 포함 된 캔버스를 사용하는 접근 방식이 라이브러리가 포함되지 않은 경우에는 괜찮습니다. 그러나 Animate를 사용하는 경우에는 그렇지 않으며 drawImage()과 같은 기본 캔버스 메서드를 사용하는 것과 그래픽을 그릴 방법이 다릅니다.

애니메이션은 EaselJS 라이브러리를 포함 CreateJS 스위트를 포함, 이것은 당신이 당신의 캔버스에 그리는 또 다른 도구를 사용할 수 있습니다. 두 개 또는 그 중 하나는 Stage 개체, 애니메이션 프로젝트의 시각적 컨테이너 및 이미지, 캔버스 또는 비디오를 나타내는 Bitmap 개체입니다. 이 질문의 효과를 위해 두 개체 만 필요합니다.

/* It is not necessary to declare the canvas or stage element, 
    as both are already declared. At this point the stage is ready to be drawn */ 

show_image(); 

function show_image() { 
    var source_image = new Image(); 
    source_image.src = 'https://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png'; 

    source_image.onload = function(event) { 
     /* A new Bitmap object is created using your image element */ 
     var bmp = new createjs.Bitmap(event.currentTarget); 

     /* The Bitmap is added to the stage */ 
     stage.addChild(bmp); 
    } 
}