javascript - 在单个页面上绘制多个 Canvas

Question

我需要在单个页面上绘制多个 Canvas ，如下所示:

<canvas id="myCanvas_1" width="71" height="80"></canvas>

<canvas id="myCanvas_2" width="71" height="80"></canvas>

<canvas id="myCanvas_3" width="71" height="80"></canvas>

我在 id "myCanvas_1"处绘制 Canvas 的脚本是:

<script>

      var canvas = document.getElementById('myCanvas1');

      var context = canvas.getContext('2d');
      var x = canvas.width / 2;
      var y = canvas.height / 2;
      var radius = 75;
      var startAngle = 1.5 * Math.PI;
      var endAngle = 0.6 * Math.PI;
      var counterClockwise = false;

      context.beginPath();
      context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
      context.lineWidth = 150;

      // line color
      context.strokeStyle = 'black';
      context.stroke();


    </script>

我如何“循环”此脚本以在 id“myCanvas_2”、id“myCanvas_3”等上绘制 Canvas ...？

感谢大家

Answer 1

尝试一个js，

例如:

for(i = 1 ; i<4 ; i++){

 var canvas = document.getElementById('myCanvas_'+i);
  var context = canvas.getContext('2d');
  var x = canvas.width / 2;
  var y = canvas.height / 2;
  var radius = 75;
  var startAngle = 1.5 * Math.PI;
  var endAngle = 0.6 * Math.PI;
  var counterClockwise = false;

  context.beginPath();
  context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
  context.lineWidth = 150;

  // line color
  context.strokeStyle = 'black';
  context.stroke();
}

希望对你有帮助。