html5キャンバスにドットを描く

Question

キャンバスにドットとして表現したいパーセンテージがあります。これは本質的に10×10のマトリックスで、1％を表すドットまたはイメージを持っています。 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>