}
points.push([mouseArea.mouseX, mouseArea.mouseY, colour]);
var ctx = getContext('2d');
for (var i = 1; i < points.length; ++i) {
ctx.beginPath();
ctx.strokeStyle = points[i - 1][2];
ctx.moveTo(points[i - 1][0], points[i - 1][1]);
ctx.lineTo(points[i][0], points[i][1]);
ctx.stroke();
}
}
}
Figure 23.6 : Dessin en continu avec des lignes droites
Note > Cette manière de procéder n'est toujours pas parfaite : si l'utilisateur lâche
la souris à un moment et reprend son dessin ailleurs, une ligne sera dessinée entre le
point précédent et le nouveau. Il faudrait donc séparer chaque série de points.
De même, au niveau de la performance, afficher aussi régulièrement un très grand
nombre de courbes n'est pas idéal. Il vaudrait mieux ne réafficher tous les points que
lorsque c'est nécessaire, c'est-à-dire lors d'un redimensionnement de la zone de
dessin. De même, pour faire le lien avec le défaut précédent, il vaudrait mieux ne
dessiner qu'un minimum de courbes (effectuer un minimum d'appels à beginPath).
Note > Une autre manière d'éviter les effacements lors du redimensionnement serait
442
points.push([mouseArea.mouseX, mouseArea.mouseY, colour]);
var ctx = getContext('2d');
for (var i = 1; i < points.length; ++i) {
ctx.beginPath();
ctx.strokeStyle = points[i - 1][2];
ctx.moveTo(points[i - 1][0], points[i - 1][1]);
ctx.lineTo(points[i][0], points[i][1]);
ctx.stroke();
}
}
}
Figure 23.6 : Dessin en continu avec des lignes droites
Note > Cette manière de procéder n'est toujours pas parfaite : si l'utilisateur lâche
la souris à un moment et reprend son dessin ailleurs, une ligne sera dessinée entre le
point précédent et le nouveau. Il faudrait donc séparer chaque série de points.
De même, au niveau de la performance, afficher aussi régulièrement un très grand
nombre de courbes n'est pas idéal. Il vaudrait mieux ne réafficher tous les points que
lorsque c'est nécessaire, c'est-à-dire lors d'un redimensionnement de la zone de
dessin. De même, pour faire le lien avec le défaut précédent, il vaudrait mieux ne
dessiner qu'un minimum de courbes (effectuer un minimum d'appels à beginPath).
Note > Une autre manière d'éviter les effacements lors du redimensionnement serait
442
