javascript - 在 html5 Canvas 上绘制点

Question

我想在 Canvas 上将百分比表示为点。这本质上是一个 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>