Question

一切顺利，直到我尝试将for循环放入（无论我的意思是使用循环）。

 <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>

Answer 1

JavaScript中没有int个关键字。您应该使用var关键字。另请注意，每个函数只能有1个返回值。 for循环没有多大意义。

Answer 2

以下是您重构的代码：

在javascript对象中保存每个圈子定义：

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

保存数组中的所有圆形对象：

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

创建一个从指定的圆形对象中绘制1个圆圈的函数：

  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<circles.length;i++){     
          drawCircle(circles[i]);
      }  
  }

全部放在一起......这是一个演示：

＆＃13;

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();
}

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

在html中

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

在剧本中

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

</script>

请参阅jsfiddle Demo

我正在制作一个html 5画布并尝试在其上绘制圆圈，但是当我尝试使用循环时，所有都消失了

3 个答案: