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＆＃34; myCanvas_1＆＃34;是：

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

我怎样才能＆＃34;循环＆＃34;此脚本也在id＆＃34; myCanvas_2＆＃34;，id＆＃34; myCanvas_3＆＃34;上绘制画布。等...

感谢所有

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

我希望它有所帮助。

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

2 个答案: