HTML5 자바 스크립트의 회전

Question

저는 JavaScript (및 프로그래밍)을 처음 사용하고 HTML5 캔버스에서 회전을 추가하는 방법에 어려움을 겪고 있습니다. 기본적으로 JavaScript 객체를 다른 객체를 중심으로 회전 시키려고합니다. 제 경우에는 태양 주위를 도는 행성이 필요합니다.

나는 현재 행성 함수를 그리기 함수 내에서 선언하고 잘 표시합니다. 로테이션을 추가하는 방법에 대한 도움이 필요합니다.

감사합니다.

Answer 1

다음은 간단한 예제 : http://jsfiddle.net/FTMCv/1/

내가 만든하신 CelestialBody 클래스는 원형 궤도를 차지하고, 그래서 완벽한 시뮬레이션 아니지만, 대부분의 경우에 충분하다.

(function(){ 

    var can = document.getElementById('planetarium'), 
     ctx = can.getContext('2d'), 
     bodies = []; 


    (function init(){ 
     var orbCenter = {x:can.width/2, y:can.height/2}; 

     bodies.push(new CelestialBody(
      50, orbCenter , 0, 0)); 

     bodies.push(new CelestialBody(
      15, orbCenter , 250, -.2)); 
     bodies.push(new CelestialBody(
      6, orbCenter , 200, .3)); 
     bodies.push(new CelestialBody(
      7, orbCenter , 150, .5)); 
     bodies.push(new CelestialBody(
      5, orbCenter , 100, 1)); 
     bodies.push(new CelestialBody(
      4, orbCenter , 75, 3)); 
    })(); 

    function CelestialBody(radius, orbitalCenter, orbitalDistance, orbitalVelocity){ 
     var pos = {x:0, y:0}, 
      rad = radius, 
      orb = {x: orbitalCenter.x, y:orbitalCenter.y}, 
      ove = orbitalVelocity, 
      odi = orbitalDistance; 

     var update = function(){ 
      var cAng = Math.atan2(pos.y - orb.y, pos.x - orb.x); 
      var rAng = cAng + ove * Math.PI/180; 

      pos.x = orb.x + Math.cos(rAng) * odi; 
      pos.y = orb.y + Math.sin(rAng) * odi; 
     }; 

     this.draw = function(ctx){ 
      update(); 

      ctx.beginPath(); 
      ctx.fillStyle = "#fff"; 
      ctx.arc(pos.x,pos.y, rad, 0, 2*Math.PI); 
      ctx.fill(); 
     }; 

     (function init(){ 
      pos.y = orb.y; 
      pos.x = orb.x + odi; 
     })(); 
    } 

    (function draw(){ 
     ctx.clearRect(0,0,can.width,can.height); 

     for(var i = 0; i < bodies.length; i++) 
      bodies[i].draw(ctx); 

     webkitRequestAnimationFrame(draw); 
    })(); 

})();​