水平繪製多個圓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 2014-10-20 19:40:00

明白了，謝謝您的更正:) – Drew 2014-10-20 20:07:57

-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

感謝您的回答併發布user3087839，它的工作原理:) – Drew 2014-10-20 20:05:49

歡迎您 – 2014-10-20 20:06:13

水平繪製多個圓HTML5

回答

相關問題