Javascript Girl
  1. Javascript Girl
  3. Modifiez précisément l'opacité du trait mais pas la couleur sur le canevas
Intereting Posts
Pourquoi ai-je besoin d'un serveur HTTP pour exécuter Angular 2? Filtrage de json similaire à mysql "like" operator Comment fermer toutes les fenêtres pop-up? Création de lignes de temps verticales avec Javascript / jQquery Erreur de réinitialisation de forme angularjs AngularJS Failed Resource GET Utilisation de localstorage dans les favoris IE8 alternative à window.scrollY? Javascript / Authentification Ajax NTLM Éditeur de sélection SlickGrid Injecter des variables dans un webpack Quelles sont les bonnes ressources OOP de JavaScript? Passer les paramètres en tant que tableau Comment puis-je utiliser le code d'Aptana pour travailler avec Google Maps API v3? Ne peut pas se débarrasser de l'en-tête X-Powered-By: Express

Modifiez précisément l'opacité du trait mais pas la couleur sur le canevas

J'ai un bon script ordonné qui parcourt les couleurs et ça fonctionne bien avec le format #xxxxxx , mais je veux changer la transparence. Y-a-t-il un moyen de faire ça?

Je parle de ctx.strokeStyle()

Voici le code actuel: 

 canvas.strokeStyle = '#' + (((16777215 / s.length) * i).toString(16));

Il passe à travers une boucle for avec i augmenté de 1 chaque cycle et c'est une partie d'un commutateur. La boucle for se ressemble à ceci: for(var i = 0; i < s.length; i++){}

Vous pouvez modifier ctx.globalAlpha dans la plage de 0 à 1 avant de dessiner chaque élément en opacité dont vous avez besoin.

Utilisez ctx.globalAlpha comme Martin Tale a répondu ou rgba([0-255], [0-255], [0-255], [0-1]) . Vous devez donc convertir l'entier en valeurs de rgb individuelles: 

 var color = ((16777215 / s.length) * i); var r = (color >> 16) & 255; var g = (color >> 8) & 255; var b = color & 255; var alpha = 0.5; canvas.strokeStyle = "rgba("+r+","+g+","+b+","+alpha+")";