Tela: come riempire tutti i cerchi contemporaneamente, non uno per uno: javascript, html, html5-canvas

Ho mentre disegna in cerchio i cerchi uno per uno:

actx.shadowColor = "rgba(0, 0, 0, 1)";
while (len--) {
var point = data[len];

actx.beginPath();
actx.arc(point[0] - 15000, point[1] - 15000, 10, 0, Math.PI * 2);
actx.closePath();
actx.fill();
}

Mi sembra un po 'lento, quindi sto pensando a come possa essere ottimizzato. Ho scoperto che il fill() La funzione impiega più tempo, quindi ho provato a inserirlo dopo il ciclo, ma disegna solo l'ultimo cerchio.

1. C'è un modo per riempire tutti i cerchi contemporaneamente?
2. O c'è un altro metodo più veloce?

risposte:

Alcune ottimizzazioni:

• Calcola Math.PI * 2 una volta all'esterno del ciclo anziché ogni volta all'interno del ciclo
• Metti beginPath prima del ciclo
• Disegna un arco + closePath all'interno del loop (stai creando molti percorsi secondari del cerchio all'interno del loop)
• inserisci riempimento dopo il ciclo per disegnare tutti i sottotracciati contemporaneamente

Codice refactored:

// test data
var data=[];
for(var i=0;i<100;i++){data.push([i+15000+30,i+15000+30]);}

// calculate PI2 outside the loop instead of every time in the loop
var PI2=Math.PI*2;

actx.shadowColor = "rgba(0, 0, 0, 1)";

// beginpath once outside the loop
actx.beginPath();
var len=data.length;
while (len--) {
var point = data[len];

// draw
actx.arc(point[0]-15000, point[1]-15000,10,0,PI2);
// closepath will close the current circle"s subpath
actx.closePath();

}
// just fill once when done drawing
actx.fill();