在html5画布上绘制点

Question

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

知道解决该问题的最佳方法是什么吗？

类似于以下内容：

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

Answer 1

在这里，我创建了一个简单的示例。 希望对您有帮助。

  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>