캔버스로 스프라이트 시트를 그리는 중 오류가 발생했습니다.

Question

나는 스프라이트 시트에 30 개의 스프라이트로 구성된 걷는 그림을 작성하여 캔버스를 연습하고 있습니다. following site에서 확인하십시오.

그러나 보시다시피 유창 해 보이지 않습니다. 그리고 나는 clearRect과 drawImage에 대해 정의되지 않은 오류의 메서드를 호출 할 수 없습니다.

미리 감사드립니다.

Answer 1

귀하의 사이트에서 코드를 확인했습니다. 문제는 다음과 같습니다. ctx가 처음 실행될 때 init 함수()의 값으로 채워지지 않습니다.

draw() 함수는 본문이로드되기 전에로드 된 이미지가 머리글에로드 될 때 시작됩니다.

일부 영역의 경우 이미지가 측면으로 이동하는 것과 관련하여 수학을 확인하십시오. 그것은 쉽게 잘못된 부분을

편집 자르기 일 수 있었다 : 여기에 스크립트에 있어야 무엇, 그것은 머리 태그

var ctx; 
var count = 0; 
var x; 
var y; 

var img = new Image(); 


function draw() 
{ 
    requestAnimationFrame(draw); 

    ctx.clearRect(0, 0, 171, 192); 

    x = (count % 6) * (934/6); 
    y = Math.floor(count/6) * 192; 
    ctx.drawImage(img, x, y, 934/6, 192, 0, 0, 171, 192); 
    if(count == 29) 
     count = 0; 
    else 
     count++; 
} 

function init() 
{ 
    ctx = document.getElementById('canvas01').getContext("2d"); 
    img.src="img/sprites.jpg"; 
    img.onload = draw; 
}