円軌道アニメーションが脈動動作で動作しない

Question

私は、HTML5でキャンバスを使って一種の脈動する月効果を実現しようとしています。私は拍動効果がありますが、私のrequestAnimation関数は、私が定義した循環経路に沿ってフレームを更新しているようには見えません。ここにはJavaScriptがあります。

window.requestAnimFrame = function() { 
return window.requestAnimationFrame || window.webkitRequestAnimationFrame 
|| 
window.mozRequestAnimationFrame || window.oRequestAnimationFrame 
|| window.msRequestAnimationFrame || 
    function(a) { 
    window.setTimeout(a, 1E3/60) 
    } 
}(); 


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

function Ball(radius, color) { 
    if (radius === undefined) { 
    radius = 40; 
    } 
    if (color === undefined) { 
    color = "#ff0000"; 
    } 

    this.x = 0; 
    this.y = 0; 
    this.radius = radius; 
    this.rotation = 0; 
    this.scaleX = 1; 
    this.scaleY = 1; 
    this.lineWidth = 1; 
    } 

    Ball.prototype.draw = function(context) { 
    context.save(); 
    context.translate(this.x, this.y); 
    context.rotate(this.rotation); 
    context.scale(this.scaleX, this.scaleY); 
    context.lineWidth = this.lineWidth; 
    context.fillStyle = "#e50000"; 
    context.beginPath(); 
    //x, y, radius, start_angle, end_angle, anti-clockwise 
    context.arc(0, 0, this.radius, 0, (Math.PI * 2), true); 
    context.closePath(); 
    context.fill(); 
if (this.lineWidth > 0) { 
    context.stroke(); 
    } 
    context.restore(); 
    }; 

    window.onload = function() {     
    var canvas = document.getElementById('canvas'), 
        context = canvas.getContext('2d'), 
        ball = new Ball(), 
        angle = 0, 
        centerScale = 1, 
        range = 0.5, 
        speed = 0.02, 
  
pathX = canvas.width/2, 
pathY = canvas.height/2, 
pathRadius = 150, 
pathAngle = 0; 
ball.x = Math.cos(pathAngle) * pathRadius + pathX; 
ball.y = Math.sin(pathAngle) * pathRadius + pathY;   

    (function drawFrame() {       
    window.requestAnimationFrame(drawFrame, canvas);       
    context.clearRect(0, 0, canvas.width, canvas.height);       
    ball.scaleX = ball.scaleY = centerScale + Math.sin(angle) * range;   
    angle += speed;     
    pathAngle += speed; 
    ball.draw(context);     
    }());   
}; 

Answer 1

自分の中心点を中心に円を回転しているため、中心点に対して周回していません。

// offset the circles rotation by 100px off its centerpoint 
context.arc(100, 0, this.radius, 0, (Math.PI * 2), true); 

例コード広告デモ：ここ

window.requestAnimFrame = function() { 
 
return window.requestAnimationFrame || window.webkitRequestAnimationFrame 
 
|| 
 
window.mozRequestAnimationFrame || window.oRequestAnimationFrame 
 
|| window.msRequestAnimationFrame || 
 
    function(a) { 
 
    window.setTimeout(a, 1E3/60) 
 
    } 
 
}(); 
 

 

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

 
function Ball(radius, color) { 
 
    if (radius === undefined) { 
 
    radius = 40; 
 
    } 
 
    if (color === undefined) { 
 
    color = "#ff0000"; 
 
    } 
 

 
    this.x = 0; 
 
    this.y = 0; 
 
    this.radius = radius; 
 
    this.rotation = 0; 
 
    this.scaleX = 1; 
 
    this.scaleY = 1; 
 
    this.lineWidth = 1; 
 
    } 
 

 
    Ball.prototype.draw = function(context) { 
 
    context.save(); 
 
    context.translate(this.x, this.y); 
 
    context.rotate(this.rotation); 
 
    context.scale(this.scaleX, this.scaleY); 
 
    context.lineWidth = this.lineWidth; 
 
    context.fillStyle = "#e50000"; 
 
    context.beginPath(); 
 
    //x, y, radius, start_angle, end_angle, anti-clockwise 
 
    context.arc(50, 0, this.radius, 0, (Math.PI * 2), true); 
 
    context.closePath(); 
 
    context.fill(); 
 
if (this.lineWidth > 0) { 
 
    context.stroke(); 
 
    } 
 
    context.restore(); 
 
    }; 
 

 
    window.onload = function() {  
 
    var canvas = document.getElementById('canvas'), 
 
     context = canvas.getContext('2d'), 
 
     ball = new Ball(), 
 
     angle = 0, 
 
     centerScale = 1, 
 
     range = 0.5, 
 
     speed = 0.02, 
 
    
 
     pathX = canvas.width/2, 
 
     pathY = canvas.height/2, 
 
     pathRadius = 50, 
 
     pathAngle = 0; 
 
     ball.x = canvas.width/2; // Math.cos(pathAngle) * pathRadius + pathX; 
 
     ball.y = canvas.height/2; //Math.sin(pathAngle) * pathRadius + pathY; 
 

 
    (function drawFrame() {  
 
    window.requestAnimationFrame(drawFrame, canvas);  
 
    context.clearRect(0, 0, canvas.width, canvas.height);  
 
    ball.scaleX = ball.scaleY = centerScale + Math.sin(angle) * range; 
 
    angle += speed;  
 
    pathAngle += speed; 
 
    ball.rotation+=Math.PI/180; 
 
    ball.draw(context);  
 
    }()); 
 
};

body{ background-color:white; } 
 
#canvas{border:1px solid red; margin:0 auto; }

<canvas id="canvas" width=300 height=300></canvas>