在html5画布上画点

Question

我有一个百分比，我想在画布上表示为点。这基本上是一个10 x 10矩阵，其中我有一个代表百分之一的点或图像。因此当它是100％时它将是绿色，当它是10％时，只有10个点是绿色而其余的是红色。

知道解决这个问题的最佳方法是什么？

类似于此：

除了它们应该是圆圈/图像而不是正方形？

Answer 1

Here我创建了一个简单的例子。希望它对你有所帮助。

  var canvas = document.getElementById('mycanvas');
          var context = canvas.getContext('2d');
          var sizeX = canvas.width / 10;
          var sizeY = canvas.height / 10;
          var total = 15;
          var count = 0;
          for (var j = 0; j < 10; j++) {
            for (var i = 0; i < 10; i++) {
              context.beginPath();
              context.arc(sizeX * (i+.5), sizeY * (j+.5), sizeX / Math.PI, 0, 2 * Math.PI, false);
              context.fillStyle = total > count ? 'green' : 'red';
              context.fill();
              count++;
            }
          }

<canvas id="mycanvas" width="200" height="200" style="border:1px solid black;"></canvas>