圓形圖不能在90度清除

Question

我想在360度的軌道上移動一個紅色的圓。

但是在90度時，圓圈沒有被清除。

代碼是在這裏：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(); 

Answer 1

由於您受到150, 150翻譯您的背景下，你需要在-150, -150，開始您的clearRect矩形。 （這是你的updated fiddle）

@ Teemu的評論更優雅的解決方案，雖然即

刪除ctx.translate(150, 150)，並在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();