Я работаю над холстом HTML 5 и пытаюсь нарисовать на нем круги, но когда я пытаюсь использовать цикл, все исчезает

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:

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

Собираем все вместе... Вот демо:

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>

Answer 2

Здесь нет int Ключевое слово в JavaScript. Вы должны использовать var ключевое слово вместо Также обратите внимание, что каждая функция может иметь только 1 возвращаемое значение. for Цикл в вашем коде не имеет большого смысла.

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