Je crée une application de dessin à l'aide de la toile HTML5.
https://github.com/homanchou/sketchypad
Je peux utiliser RGBA pour contrôler l'opacité dans mes coups de ligne, mais comment puis-je obtenir un bord de brosse à plumes doux vs un bord circulaire dur?
4 Réponses :
Je suis assez sûr que cela dépend du navigateur que vous utilisez. Dernièrement, j'ai vérifié (il y a un moment - aurait pu changer) Firefox et Chrome Ne pas Antialias Bords, tandis que IE9 le fait.
Je ne parle pas des bords antialiasés, qui n'effectuent que la couche externe mince de pixels. Jetez un coup d'œil à Muro.DeviantaLeArt.com , comment réalise-t-il que plusieurs couches de pixels de pixel?
Cette réponse est-elle toujours vraie en 2020? Merci pour ton aide!
Une fois que vous avez commis vos lignes à une toile, vous pouvez adoucir (flou) à l'aide de la classe Canvaspixelarray. C'est juste une question d'ajouter votre couleur aux pixels voisins. Voici une bonne information sur la manipulation de pixels .
Trois solutions possibles:
Vous pouvez écrire vos lignes dans une toile hors écran, appliquer un filtre flou, puis dessiner le résultat dans la toile visible.
Si vous utilisez uniquement des segments de ligne droite, vous pouvez utiliser un gradient linéaire pour chaque segment de ligne. La direction du gradient doit être dans un angle de 90 "par rapport à la direction du segment de ligne.
dessine les mêmes lignes plusieurs fois au même endroit. D'abord avec la largeur complète et un faible alpha. Puis diminuez la largeur et augmentez l'alpha.
Exemple d'utilisation d'un gradient linéaire pour chaque segment de ligne:
http : //jsfiddle.net/chdh/mmyat/ exemple pour dessiner une ligne plusieurs fois, en diminuant la largeur et en augmentant l'alpha: < p> http://jsfiddle.net/chdh/rmtxl/
J'ai créé un test JSperf pour comparer les performances de ces deux choix: JSPERF.com/fatered-Canvas-line < / a>. On dirait que le dessin à plusieurs lignes est légèrement plus rapide, mais je pense que ça a l'air beaucoup plus laid.
Vous pouvez utiliser le filtre CSS pour brouiller la toile. Il est possible avec tour de rasterisation SVG . Voici comment vous le faites:
Faites deux toiles, une sur une autre. L'un d'entre eux appelons «cible» et un autre «tampon». Le tampon est celui que vous dessinez et la cible est la toile résultante.
appliquer C'est la partie intéressante. Sur chaque course (c.-à-d. Sur MouseUp), rasteriser la toile de tampon, placez l'image dans CSS-filtre: flou (px) sur toile tampon afin que l'utilisateur puisse voir instantanément l'aperçu flou.
Est-ce toujours la meilleure réponse en 2020? Merci pour ton aide!