Heim >Web-Frontend >js-Tutorial >Wie kann ich eine Hex-Farbe in JavaScript programmgesteuert aufhellen oder abdunkeln?
Mit dieser Funktion können Sie eine Hex-Farbe programmgesteuert um einen bestimmten Betrag aufhellen oder abdunkeln. Übergeben Sie einfach eine Zeichenfolge wie „3F6D2A“ für die Farbe und eine Ganzzahl amt für den Aufhellungs- oder Abdunkelungsbetrag. Übergeben Sie zum Abdunkeln eine negative Zahl (z. B. -20).
<code class="js">function LightenDarkenColor(col, amt) { col = parseInt(col, 16); return (((col & 0x0000FF) + amt) | ((((col >> 8) & 0x00FF) + amt) << 8) | (((col >> 16) + amt) << 16)).toString(16); } // TEST console.log(LightenDarkenColor("3F6D2A", 40));
Schnellere und kleinere Version:
<code class="js">function LightenDarkenColor(col, amt) { var num = parseInt(col, 16); var r = (num >> 16) + amt; var b = ((num >> 8) & 0x00FF) + amt; var g = (num & 0x0000FF) + amt; var newColor = g | (b << 8) | (r << 16); return newColor.toString(16); } // TEST console.log(LightenDarkenColor("3F6D2A", -40));
Verarbeiten Sie Farben mit oder ohne #-Präfix:
<code class="js">function LightenDarkenColor(col, amt) { var usePound = false; if ( col[0] == "#" ) { col = col.slice(1); usePound = true; } var num = parseInt(col, 16); var r = (num >> 16) + amt; if ( r > 255 ) r = 255; else if (r < 0) r = 0; var b = ((num >> 8) & 0x00FF) + amt; if ( b > 255 ) b = 255; else if (b < 0) b = 0; var g = (num & 0x0000FF) + amt; if ( g > 255 ) g = 255; else if ( g < 0 ) g = 0; return (usePound?"#":"") + (g | (b << 8) | (r << 16)).toString(16); }</code>
Um die Funktion zu verwenden, übergeben Sie einfach die hexadezimale Farbzeichenfolge, die Sie aufhellen möchten abdunkeln und den Betrag angeben, um den Sie es anpassen möchten. Der folgende Code hellt beispielsweise die Farbe „3F6D2A“ um 40 auf:
<code class="js">const lightenedColor = LightenDarkenColor("3F6D2A", 40); console.log(`Lightened Color: ${lightenedColor}`); // Output: 7FADEE</code>
Die Leistung dieser Funktion ist hinsichtlich Geschwindigkeit und Größe optimiert. Es verwendet bitweise Operationen, um die Farbwerte zu manipulieren, was es extrem schnell macht. Die Funktion ist außerdem sehr klein und daher ideal für den Einsatz in kleinen Anwendungen.
Das obige ist der detaillierte Inhalt vonWie kann ich eine Hex-Farbe in JavaScript programmgesteuert aufhellen oder abdunkeln?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!