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翻译上下文时，需要在clearRect处开始-150, -150矩形。（这是您的updated fiddle）

@ Teemu的评论是更优雅的解决方案，即。

删除ctx.translate(150, 150)，并在arc()
中向x和y添加150

 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();

圆形绘图不会在90度时清除

1 个答案: