Dessinez vos lignes 1-pixel sur des coordonnées comme ctx.lineTo(10.5, 10.5) . Dessiner une ligne d'un pixel au-dessus du point (10, 10) signifie que ce 1 pixel à cette position va de 9.5 à 10.5 ce qui donne deux lignes qui sont dessinées sur la toile.

une bonne astuce pour ne pas toujours besoin d'ajouter le 0.5 à la coordonnée réelle que vous voulez dessiner si vous avez beaucoup de lignes d'un pixel, est de ctx.translate(0.5, 0.5) votre tout toile en au début.

cela peut être fait dans Mozilla Firefox. Ajouter à votre code:

contextXYZ.mozImageSmoothingEnabled = false;

dans Opera c'est actuellement une requête de fonctionnalité, mais avec un peu de chance il sera ajouté bientôt.

Il faut lisser les graphiques vectoriels

anti-aliasing est nécessaire pour corriger le traçage de graphiques vectoriels qui implique la non-entier coordonnées (0.4, 0.4), qui tous, mais très peu de clients le font.

lorsqu'on lui donne des coordonnées non-entières, la toile a deux options:

• Antialias - peindre les pixels autour de la coordonnée en fonction de la distance entier coordonnées de non-entier (l'erreur d'arrondi).
• Round - appliquer une fonction d'arrondissement aux coordonnées non-entières (ainsi 1.4 deviendra 1, par exemple).

la stratégie ultérieure fonctionnera pour les graphiques statiques, bien que pour les petits Graphiques (un cercle avec un rayon de 2) les courbes montreront des étapes claires plutôt que la courbe lisse.

le vrai problème est quand les graphiques est traduit (déplacé) - les sauts entre un pixel et un autre (1.6 => 2, 1.4 => 1), signifie que l'origine de la forme peut sauter par rapport au conteneur parent (déplacement constant de 1 pixel de haut en bas et de gauche à droite).

Quelques conseils

Conseil n ° 1 : vous pouvez adoucir (ou durcir) l'antialiasage en escaladant la toile (disons par x) puis appliquer l'échelle réciproque (1/x) aux géométries vous-même (sans utiliser la toile).

comparer (sans échelle):

(toile échelle: 0.75; manuel de l'échelle: 1.33):

et (échelle en toile: 1,33; échelle manuelle: 0,75):

Conseil N ° 2 : si a Jaggy look est vraiment ce que vous recherchez, essayer de dessiner chaque forme quelques fois (sans effacement). À chaque tirage, les pixels antialiasants s'assombrissent.

comparer. Après le dessin une fois:

après trois tirages:

je dessinais tout en utilisant un algorithme de ligne personnalisé tel que l'algorithme de ligne de Bresenham. Découvrez cette implémentation javascript: http://members.chello.at/easyfilter/canvas.html

je pense que cela va certainement résoudre vos problèmes.

je tiens à ajouter que j'ai eu des problèmes lors de la réduction d'échelle d'une image et le dessin sur toile, il était encore en utilisant lissage, même si il n'était pas en utilisant lors de l'upscaling.

j'ai résolu en utilisant ceci:

function setpixelated(context){
    context['imageSmoothingEnabled'] = false;       /* standard */
    context['mozImageSmoothingEnabled'] = false;    /* Firefox */
    context['oImageSmoothingEnabled'] = false;      /* Opera */
    context['webkitImageSmoothingEnabled'] = false; /* Safari */
    context['msImageSmoothingEnabled'] = false;     /* IE */
}

Vous pouvez utiliser cette fonction comme ceci:

var canvas = document.getElementById('mycanvas')
setpixelated(canvas.getContext('2d'))

peut-être que c'est utile pour quelqu'un.

ctx.translate(0.5, 0.5);
ctx.lineWidth = .5;

avec ce combo je peux dessiner de belles lignes minces 1px.

remarquez un truc très limité. Si vous voulez créer une image de 2 couleurs, vous pouvez dessiner n'importe quelle forme que vous voulez avec la couleur #010101 sur un fond avec la couleur #000000. Une fois cela fait, vous pouvez tester chaque pixel dans l'imageData.data[] et réglez à 0xFF quelle que soit la valeur n'est pas 0x00 :

imageData = context2d.getImageData (0, 0, g.width, g.height);
for (i = 0; i != imageData.data.length; i ++) {
    if (imageData.data[i] != 0x00)
        imageData.data[i] = 0xFF;
}
context2d.putImageData (imageData, 0, 0);

le résultat sera une image en noir et blanc non-antialiasé. Ce ne sera pas parfait, puisque quelques antialiasing auront lieu, mais cet antialiasing sera très limité, le la couleur de la forme ressemble beaucoup à la couleur de l'arrière-plan.