Javascript 在一页上绘制多个画布

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

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

var canvas=document.getElementById（'myCanvas1'）；
var context=canvas.getContext（'2d'）；
var x=画布宽度/2；
变量y=画布高度/2；
var半径=75；
var startAngle=1.5*Math.PI；
var endAngle=0.6*Math.PI；
var逆时针=假；
context.beginPath（）；
弧（x，y，半径，星形，端角，逆时针）；
context.lineWidth=150；
//线条颜色
context.strokeStyle='black'；
stroke（）；

如何“循环”此脚本以在id“myCanvas_2”、id“myCanvas_3”等上绘制画布

---

感谢所有人

向每个画布添加一个类，作为

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）

希望有帮助。
试试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();
}

（i=1；i）的

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