캔버스의 왼쪽에서 오른쪽으로 원을 움직입니다.

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() 사용) 캔버스 clearRect() 자신의 일을 가지고 당신이 순서 context.beginPath()을 추가해야합니다

주를 취소해야합니다.

일단 완료되면 호의 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>