2016-07-04 7 views
0

Ich möchte einen roten Kreis auf der Umlaufbahn mit 360 Grad bewegen.Kreiszeichnung ist nicht bei 90 Grad gelöscht

Aber bei 90 Grad ist der Kreis nicht gelöscht.

-Code ist hier: https://jsfiddle.net/Laqd0L36/3/

var i=0; 

function Rotate(ctx){ 
    i++;   
    if(i==360){        
     i=0; 
    } 
    ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height); 
//Radius of orbit * i(degree) * convert to radian 
    x = 140*Math.cos(i*Math.PI/180); 
    y = 140*Math.sin(i*Math.PI/180); 
    Circle(ctx,x,y); 
    } 

function Circle(ctx,x,y){ 
    ctx.fillStyle = 'rgb(255,35,55)'; 
    ctx.beginPath(); 
    ctx.arc(x,y,12,0,Math.PI*2,true); 
    ctx.fill(); 
    ctx.closePath(); 
    } 

function CtxInterval(){ 
    var can = document.getElementById("can"); 
    var ctx = can.getContext("2d"); 
    ctx.translate(150,150); 
    setInterval(function(){Rotate(ctx);},10); 
} 
CtxInterval(); 
+0

Warum wollen Sie wollen Verwenden Sie unnötige HTML-Tags, während Sie Ihre Frage eingeben? –

+1

Entfernen Sie 'ctx.translate (150, 150)', und fügen Sie 'x' und' y'in 'arc()' '' 'hinzu. [Eine Geige] (https://jsfiddle.net/ud9v2dcL/). – Teemu

Antwort

1

Wie Sie Ihren Kontext von 150, 150 übersetzen, müssen Sie Ihre clearRect Rechteck auf -150, -150 starten. (Hier ist Ihre updated fiddle)

@ Teemu Kommentar elegantere Lösung ist ctx.translate(150, 150) obwohl dh

zu entfernen, und fügen Sie 150 bis x und y in arc()

var i=0; 

function Rotate(ctx){ 
    i++;   
    if(i==360){        
     i=0; 
    } 
    console.log("width: "+ctx.canvas.width+ "height: "+ctx.canvas.height); 
    ctx.clearRect(-150,-150,ctx.canvas.width,ctx.canvas.height); 

//Radius of orbit * i(degree) * convert to radian 
    x = 140*Math.cos(i*Math.PI/180); 
    y = 140*Math.sin(i*Math.PI/180); 
    Circle(ctx,x,y); 
    } 

function Circle(ctx,x,y){ 
    ctx.fillStyle = 'rgb(255,35,55)'; 
    ctx.beginPath(); 
    ctx.arc(x,y,12,0,Math.PI*2,true); 
    ctx.fill(); 
    ctx.closePath(); 
    } 

function CtxInterval(){ 
    var can = document.getElementById("can"); 
    var ctx = can.getContext("2d"); 
    ctx.translate(150,150); 
    setInterval(function(){Rotate(ctx);},10); 
} 
CtxInterval();