我在一个html 5画布上工作，并在它上画圆，但是当我试图使用一个循环都消失了。 [英] I am working on an html 5 canvas and tying to draw circles on it, but as I trying to use a loop all disappears.

问题描述

所有好的，直到我试图把for循环（无论我打算使用循环）。对不起的麻烦帮助请

  < canvas id =MyCanvaswidth =400height =400
 style =border：1px solid＃000000;> 
< / canvas> 
 
< script> 
 function（）{
 var c = document.getElementById（MyCanvas）; 
 var ctx = c.getContext（2d）; 
 ctx.beginPath（）; 
 ctx.arc（200,200,200,0,2 * Math.PI）; 
 ctx.stroke（）; 
 ctx.beginPath（）; 
 ctx.arc（200,010,0,2 * Math.PI）; 
 ctx.stroke（）; 
 for（int i = 0; i <2; i ++）{
 
 return i;} 
} 
 
< / script> 
  

方案

这是您的代码重构：

• ：

    var circle1 = {x：200，y：200，radius：200} 
   var circle2 = {x：200，y：0，radius：10}; 
    
   




• 将所有圆形对象保存在数组中： / p>
  
  

    var circles = []; 
   circles.push（circle1）; 
   circles.push（circle2）; 
   




• 创建一个从指定的圆形对象中绘制1个圆的函数： / strong>

    function drawCircle（circle）{
   ctx.beginPath 
   ctx.arc（circle.x，circle.y，circle.radius，0,2 * Math.PI）; 
   ctx.closePath（）; 
   ctx.stroke（）; 
  } 
    
   




• 创建一个函数，所有圈子：

    function drawAll（）{
   for（var i = 0; i& circle.length; i ++）{
   drawCircle（circles [i]）; 
  } 
  } 
    

将它们放在一起...这是一个演示：

  var c = document.getElementById（canvas ）; var ctx = c.getContext（2d）; var cw = canvas.width; var ch = canvas.height; var circles = []; circles.push（{x：200，y：200，radius：200 }; circle.push（{x：200，y：0，radius：10}）; drawAll（）; function drawAll（）{for（var i = 0; i  

  body {background-color ：象牙} canvas {border：1px solid red;}  

  canvas id =canvaswidth = 400 height = 400>< / canvas>  

All good until I trying to put the for loop in(no matter what I am meant to use the loop for). Sorry for the dumb quesion help please

 <canvas id="MyCanvas" width="400" height="400"
style="border:1px solid #000000;">
</canvas>

<script>
  function(){
  var c = document.getElementById("MyCanvas");
  var ctx = c.getContext("2d");
  ctx.beginPath();
  ctx.arc(200,200,200,0,2*Math.PI);
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(200,0,10,0,2*Math.PI);
  ctx.stroke();
  for(int i=0; i<2; i++){

      return i;}
  }

</script>

解决方案

Here is your code refactored:

• Save each circle definition in a javascript object:

  var circle1={x:200,y:200,radius:200};
  var circle2={x:200,y:0,radius:10};
  

• Save all the circle-objects in an array:

  var circles=[];
  circles.push(circle1);
  circles.push(circle2);
  

• Create a function that draws 1 circle from a specified circle-object:

    function drawCircle(circle){
        ctx.beginPath();
        ctx.arc(circle.x,circle.y,circle.radius,0,2*Math.PI);
        ctx.closePath();
        ctx.stroke();
    }
  

• Create a function that iterates through the array and draws all the circles:

    function drawAll(){
        for(var i=0;i<circles.length;i++){     
            drawCircle(circles[i]);
        }  
    }
  

Putting it all together...Here's a demo:

var c=document.getElementById("canvas");
var ctx=c.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;


var circles=[];
circles.push({x:200,y:200,radius:200});
circles.push({x:200,y:0,radius:10});
drawAll();

function drawAll(){
  for(var i=0;i<circles.length;i++){     
    drawCircle(circles[i]);
  }
}

function drawCircle(circle){
  ctx.beginPath();
  ctx.arc(circle.x,circle.y,circle.radius,0,2*Math.PI);
  ctx.closePath();
  ctx.stroke();
}

body{ background-color: ivory; }
canvas{border:1px solid red;}

<canvas id="canvas" width=400 height=400></canvas>

这篇关于我在一个html 5画布上工作，并在它上画圆，但是当我试图使用一个循环都消失了。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！