在单个页面上绘制多个画布

Question

我需要在单个页面上绘制多个画布，如下所示：

<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”的画布的脚本是：

<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”等位置上“循环”此脚本以绘制画布？

谢谢大家

Answer 1

为每个画布添加一个类，作为class="canvasscript"

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

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

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

在脚本中

var canvas = document.getElementsByClassName(canvasscript);

希望能帮助到你。

Answer 2

尝试使用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();
}

希望对您有所帮助。