帆布圈不起作用

Question

尝试使用class而不是Id来使我的画布工作。 JSFIDDLE帐户：http://jsfiddle.net/pJ9Z5/ 这是我的代码

function Appcircle() {
  var canvases = document.getElementsByClassName('app-circle');
  for (var i = 0; i < canvases.length; i ++) {
  var ctx = canvases[i].getContext('2d');
  var centerX = canvases.width / 2;
  var centerY = canvases.height / 2;
  var radius = 70;

  ctx.beginPath();
  ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
  ctx.fillStyle = 'green';
  ctx.fill();
  ctx.lineWidth = 5;
  ctx.strokeStyle = '#003300';
  ctx.stroke();
}
}
Appcircle();

这是HTML

 <article class="middle">
            <canvas class="app-circle" width="578" height="200"></canvas>
            <ol style="float: left; width: 20em;">
              <li>Remove the product tube from the package.</li>
              <li>Hold the tube with notched end pointing up and away from the face and body. Use scissors to cut off the narrow end at the notches along the line.</li>
            </ol>
          </article>