Question

根据w3c学校对画布的解释，我理解创建形状......

<script>
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');
  var centerX = canvas.width / 2;
  var centerY = canvas.height / 2;
  var radius = 20;

  context.beginPath();
  context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
  context.fillStyle = 'green';
  context.fill();
  context.lineWidth = 5;
  context.strokeStyle = '#003300';
  context.stroke();
</script>

这将使我的画布成为绿色圆圈。

<canvas id="myCanvas"></canvas>

但是 - 我想将“圈子”应用到页面上的多个位置，并且通过ID执行此操作将是荒谬的。

如何将上下文（如上所定义）应用于多个画布？我假设使用类，这似乎是合乎逻辑的方式。

<canvas class="redDot"></canvas>
<canvas class="redDot"></canvas>
<canvas class="redDot"></canvas>

<canvas class="greenDot"></canvas>
<canvas class="greenDot"></canvas>

<canvas class="blueDot"></canvas>
<canvas class="blueDot"></canvas>
<canvas class="blueDot"></canvas>

Answer 1

您必须遍历每个元素才能应用更改。即：

var dots = document.getElementsByClassName('dots');
for (var i=0;i<dots.length;i++){
    var canvas = dots[i];
    var context = canvas.getContext('2d');
    // Draw circles here 
}

理想情况下，您只能拥有一个可以绘制多个圆圈的画布元素

var canvas = document.getElementById('myOneAndOnlyCanvas');
// Using CSS and layering can make background
var context = canvas.getContext('2d');

dot('red',50,50);
dot('blue',100,50);
//etc..

function dot(color,x,y){
  context.beginPath();
  context.arc(y, y, radius, 0, 2 * Math.PI, false);
  context.fillStyle = color;
  context.fill();
  context.lineWidth = 5;
  context.strokeStyle = '#003300';
  context.stroke();
}

但如果这不适合您的用例，那么使用SVG对象呢？

既然你提到了w3学校：http://www.w3schools.com/svg/ 但理想情况下请查看：http://www.w3.org/Graphics/SVG/

介意，Dom Heavy页面会严重影响加载时间。根据你想要做的事情，使用图像（例如，一大群点）可能更明智。

HTML5中的画布并创建多个圆圈

1 个答案: