在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>