Cela semble étrange, mais néanmoins HTML5 prend en charge le dessin de lignes, de cercles, de rectangles et de nombreuses autres formes de base, il n'a rien de convenable pour dessiner le point de base. La seule façon de le faire est de simuler le point avec tout ce que vous avez.
Donc, fondamentalement, il y a 3 solutions possibles:
- dessiner un point comme une ligne
- dessiner un point sous forme de polygone
- dessiner un point sous forme de cercle
Chacun d'eux a ses inconvénients
Ligne
function point(x, y, canvas){
canvas.beginPath();
canvas.moveTo(x, y);
canvas.lineTo(x+1, y+1);
canvas.stroke();
}
Gardez à l'esprit que nous nous dirigeons vers le sud-est, et si c'est le bord, il peut y avoir un problème. Mais vous pouvez également dessiner dans n'importe quelle autre direction.
Rectangle
function point(x, y, canvas){
canvas.strokeRect(x,y,1,1);
}
ou d'une manière plus rapide en utilisant fillRect car le moteur de rendu ne remplira qu'un pixel.
function point(x, y, canvas){
canvas.fillRect(x,y,1,1);
}
Cercle
L'un des problèmes avec les cercles est qu'il est plus difficile pour un moteur de les rendre
function point(x, y, canvas){
canvas.beginPath();
canvas.arc(x, y, 1, 0, 2 * Math.PI, true);
canvas.stroke();
}
la même idée qu'avec le rectangle que vous pouvez réaliser avec un remplissage.
function point(x, y, canvas){
canvas.beginPath();
canvas.arc(x, y, 1, 0, 2 * Math.PI, true);
canvas.fill();
}
Problèmes avec toutes ces solutions:
- il est difficile de garder une trace de tous les points que vous allez tirer.
- quand vous faites un zoom avant, ça a l'air moche.
Si vous vous demandez, "Quelle est la meilleure façon de dessiner un point? ", J'irais avec un rectangle rempli. Vous pouvez voir mon jsperf ici avec des tests de comparaison .