Мне нужно нарисовать много точек на холсте HTML5, и он занимает довольно много времени. Мой код выглядит следующим образом:
var points = getPoints() // Array of {x,y,color}
var ctx = canvas.getContext("2d");
for (var i = 0; i < points.length; i++) {
ctx.fillStyle = points[i].color
ctx.beginPath()
ctx.arc(points[i].x, points[i].y, radius, 0, Math.PI * 2, true)
ctx.fill() }
Мне интересно, какие улучшения производительности я мог бы сделать, чтобы ускорить это. У меня только 5 разных цветов. Например, могу ли я воспользоваться формой, сортирующей список точек "на лету", чтобы изменить ctx.fillStyle
всего 5 раз вместо одного времени на точку?