HTML5 캔버스 요소를 객체로 사용

Question

예전의 액션 스크립트 게임을 HTML5로 변환하고 싶습니다. AS3에서 제공하는 접근 방식이 마음에 듭니다. 캔버스에 그린 각 요소는 동작 및 애니메이션 수행과 같이 조작 할 수있는 객체입니다.

스트레이트 캔버스는이 기능을 제공하지 않는 것 같지만 HTML5 캔버스를 추상화 한 프레임 워크가 있었으면 좋겠다.

Answer 1

만들려는 요소를 생성하기위한 생성자 함수를 만들 수 있으며 생성자에서 동작 메서드를 만들 수 있으므로 요소 및 해당 동작에 따라 모든 종류의 가능성을 사용할 수 있습니다. 공 생성자 함수의

예 :

// Ball constructor 
var Ball = function(x, y) { 
    this.x = x; 
    this.y = y; 

    this.radius = 10; 
    this.color = '#fff'; 

    // Direction and min, max x,y 
    this.dX = 15; 
    this.dY = -15; 

    this.minX = this.minY = 20 + this.radius; 
    this.maxX = this.radius - (canvasWidth - 20); 
    this.maxY = this.radius + canvasHeight; 

    this.draw = function(ctx) { 
     ctx.beginPath(); 
      ctx.arc(this.x, this.y, this.radius, 0, twoPI, true); 
     ctx.closePath(); 
     ctx.save(); 
      ctx.fillStyle = this.color; 
      ctx.fill(); 
     ctx.restore(); 
    }; 
}; 

이 좋아 사용 :적인 Cocos2D의 자바 스크립트 포트에

이

// CREATE THE BALL 
ball = new Ball(centerX, canvasHeight - paddle.height - 30); 
ball.draw(ctx);