여러 개의 원을 가로로 그리기 HTML5

어떻게하면이 코드에 수평으로 여러 개의 원을 그릴 수 있습니까? 나는 루프를 시도했지만 아무 소용이 없다.여러 개의 원을 가로로 그리기 HTML5

<!doctype html> 
    <html> 
    <head> 

     <title> Draw circle </title> 

    <body> 
    <canvas id="myCanvas" width="500" height="300" style="border:solid 2px white;"> 
    </canvas> 
    <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, 500, 300); 

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

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

    draw_circle(100, 100, 30 , "cyan"); 
    </script> 
    </body> 
    </html>

출처

2014-10-20 Drew

귀하의'draw_circle' 함수가 호출 될 때 검은 색마다와 캔버스를 작성한다. 해당 코드는 한 번만 실행해야합니다. – EvilZebra

알겠습니다. 고쳐 주셔서 감사합니다. – Drew

-1

<canvas id="myCanvas" width="500" height="300" style="border:solid 2px white;"> 
    </canvas> 
    <script> 

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

    function drawWindow(){ 
     context.fillStyle = "black"; 
     context.fillRect(0, 0, 500, 300); 

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

    } 
    function draw_circle (circleX, circleY, radius, fill) { 

     context.fillStyle = fill; 
     context.arc(circleX, circleY, radius, 0, Math.PI*2); 
     context.fill(); 
    } 
    drawWindow(); 
    for(var i = 0; i <= 3 ; i++){ 
     draw_circle((i*60)+100,100, 30 , "cyan"); 
    } 

    </script>

출처

2014-10-20 19:38:13

답변 해 주셔서 감사합니다. 사용자 3087839 님, 작동합니다 :) – Drew

당신은 진심으로 환영합니다. –

여러 개의 원을 가로로 그리기 HTML5

답변

관련 문제