从画布左侧向右侧直线移动圆圈

Question

我在这里试图用此代码在直线上画一个移动的圆圈。但即时通讯语言错了。帮我纠正这段代码。

<script> 

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

function draw_circle (circleX, circleY, radius, fill) { 
    context.fillStyle = "black"; 
    context.fillRect(0, 0, 800, 300); 

    context.strokeStyle = "red"; 
    context.strokeRect(5, 5, 790, 290); 

    var speed = 5 

    context.fillStyle = fill; 
    context.arc(circleX, circleY, radius, 0, Math.PI*2); 
    context.fill(); 
} 

setInterval(draw_circle(100,100, 30 , "cyan"), 33); 

</script> 

Answer 1

你必须清楚你的画布（使用canvas.width = canvas.width或clearRect()）

需要注意的是，你将不得不为了增加context.beginPath()有clearRect()做他的工作。

一旦完成，你只需增加你的弧的x位置。

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

 
function draw_circle (circleX, circleY, radius, fill) { 
 
    //clear the canvas 
 
    context.clearRect(0,0,canvas.width, canvas.height); 
 

 
    context.beginPath(); 
 
    context.fillStyle = "black"; 
 
    context.fillRect(0, 0, 800, 300); 
 

 
    context.strokeStyle = "red"; 
 
    context.strokeRect(5, 5, 790, 290); 
 
    var speed = 5; 
 
    //just a loop if you don't want it simply use `i+=speed;` 
 
    (i>canvas.width+radius)?i=(radius*-2):i+=speed; 
 
    context.fillStyle = fill; 
 
    context.arc(circleX, circleY, radius, 0, Math.PI*2); 
 
    context.fill(); 
 
} 
 

 
var i=0; 
 

 
setInterval(function(){draw_circle(i,100, 30 , "cyan")}, 33);

<canvas id = "myCanvas"></canvas>