Bagaimanakah saya boleh mencerahkan atau menggelapkan warna heks secara pemrograman dalam JavaScript?

Mencerahkan atau Menggelapkan warna heks (atau RGB, dan menggabungkan warna secara Program)

Fungsi ini membolehkan anda mencerahkan atau menggelapkan warna heks secara pemrograman dengan jumlah tertentu. Hanya hantar dalam rentetan seperti "3F6D2A" untuk warna dan integer amt untuk amaun menjadi cerah atau gelap. Untuk menggelapkan, masukkan nombor negatif (cth., -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));

Versi lain

Versi yang lebih pantas dan lebih kecil:

<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));

Kendalikan warna dengan atau tanpa awalan #:

<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>

Penggunaan

Untuk menggunakan fungsi, hanya masukkan rentetan warna hex yang anda ingin cerahkan atau gelap, dan jumlah yang anda mahu laraskan. Contohnya, kod berikut mencerahkan warna "3F6D2A" sebanyak 40:

<code class="js">const lightenedColor = LightenDarkenColor("3F6D2A", 40);
console.log(`Lightened Color: ${lightenedColor}`); // Output: 7FADEE</code>

Prestasi

Prestasi fungsi ini dioptimumkan untuk kelajuan dan saiz. Ia menggunakan operasi bitwise untuk memanipulasi nilai warna, yang menjadikannya sangat pantas. Fungsi ini juga sangat kecil, menjadikannya sesuai untuk digunakan dalam aplikasi kecil.

Ciri-ciri

• Mencerahkan atau menggelapkan warna hex dengan jumlah yang ditentukan
• Mengendalikan warna dengan atau tanpa awalan #
• Melaraskan untuk nilai warna yang tidak betul
• Mengembalikan perwakilan rentetan heks bagi warna baharu

Penghadan

• Fungsi ini tidak menukar warna kepada HSL untuk mencerahkan atau menggelapkan warna dengan betul. Oleh itu, keputusan mungkin berbeza daripada fungsi yang menggunakan HSL.

Atas ialah kandungan terperinci Bagaimanakah saya boleh mencerahkan atau menggelapkan warna heks secara pemrograman dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!