Ответ 1
Например, могу ли я воспользоваться формой, сортирующей список точек "на лету", чтобы изменить ctx.fillStyle только 5 раз вместо одного времени на точку?
По моему опыту, да - изменение .fillStyle часто довольно дорого.
У меня был код, который закладывал большое количество прямоугольников в холсте, и время для построения прямоугольников с двумя нерегулярно разными цветами было значительно лучше, чем заговор со многими часто меняющимися цветами.
Во всяком случае, поскольку у вас есть только пять разных цветов:
- Создайте экранный холст, в который вы можете нарисовать пять кругов.
- Используйте
.drawImage(), чтобы разбить правильный цветный круг в холсте назначения, не переучитывая координаты дуги. - Назначьте
points[i]локальной переменной внутри цикла, чтобы избежать разыменования ее снова и снова.
На моем ноутбуке этот код рисует 3000 кругов на холсте 400x400 за 7 миллисекунд:
var colours = ['red', 'green', 'blue', 'yellow', 'magenta'];
var n = colours.length;
var r = 10;
var d = r * 2;
var off = document.createElement('canvas');
off.width = n * d;
off.height = d;
var ctx = off.getContext('2d');
for (var i = 0; i < n; ++i) {
ctx.fillStyle = colours[i];
ctx.beginPath();
ctx.arc(i * d + r, r, r, 0, 2 * Math.PI);
ctx.closePath();
ctx.fill();
}
var canvas = document.getElementById('canvas');
var ctx2 = canvas.getContext('2d');
var t0 = Date.now();
for (var i = 0; i < 3000; ++i) {
var c = Math.floor(n * Math.random());
var x = Math.floor(canvas.width * Math.random());
var y = Math.floor(canvas.height * Math.random());
ctx2.drawImage(off, c * d, d, d, x - r, y - r, d, d);
}
var t1 = Date.now();
alert((t1 - t0) + "ms");