Circular Path Animation arbeitet nicht mit pulsierenden Bewegung

Question

Ich versuche, eine Art von pulsierenden Mond-Effekt mit Leinwand in HTML5 zu erreichen. Ich habe den pulsierenden Effekt, aber meine requestAnimation-Funktion scheint den Rahmen nicht entlang des von mir definierten kreisförmigen Pfades zu aktualisieren. Hier ist das 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

Sie drehen einen Kreis um seinen eigenen Mittelpunkt, so dass er nicht relativ zum Mittelpunkt in einer Umlaufbahn ist.

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

Beispielcode Anzeige eine Demo:

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>