Effets de la matrice jQuery

apporter des effets spéciaux de film de matrice à votre page Web! Ceci est un plugin jQuery cool basé sur le célèbre film "The Matrix". Le plugin simule les effets de caractère vert classique dans le film, et sélectionnez simplement une image et le plugin le convertira en une image de style matrice remplie de caractères numériques. Venez et essayez, c'est très intéressant!

Principe de travail

Le plugin charge l'image sur la toile et lit les valeurs de pixel et de couleur:

data =  ctx.getImageData(x, y, settings.grainSize, settings.grainSize).data

Le plugin lit intelligemment la zone rectangulaire de l'image et utilise jQuery pour calculer la couleur moyenne de chaque zone. Ensuite, remplacez les pixels de la zone d'image par des caractères pour obtenir des effets de matrice.

// 获取图片的一部分
data = ctx.getImageData(x, y, settings.grainSize, settings.grainSize).data;
var r_avg = 0, g_avg = 0, b_avg = 0;

// 计算每个通道的总和
for (var i = 0; i < data.length; i += 4) {
    r_avg += data[i];
    g_avg += data[i + 1];
    b_avg += data[i + 2];
}

// 计算每个通道的平均颜色
r_avg = Math.round(r_avg / (data.length / 4));
g_avg = Math.round(g_avg / (data.length / 4));
b_avg = Math.round(b_avg / (data.length / 4));

Le plugin

génère de nombreuses balises <b></b>, chacune contenant un caractère:

var block = document.createElement("b");
jQuery(matrix_cont).append(block);
var r = image_colors[i].r;
var g = image_colors[i].g;
var b = image_colors[i].b;
block.innerHTML = getChar(r, g, b);
switch (settings.colors) {
    case "bn":
        var gray = Math.round((r + g + b) / 3);
        jQuery(block).css("color", "rgb(" + gray + "," + gray + "," + gray + ")");
        break;
    case "green":
        jQuery(block).css("color", "rgb(0," + g + ",0)");
        break;
    case "all":
    default:
        jQuery(block).css("color", "rgb(" + r + "," + g + "," + b + ")");
        break;
}

Sélection de caractères:

Les couleurs plus sombres utilisent les caractères avant et les couleurs plus lumineuses utilisent les caractères arrière.

chars: ['.', '¸', '¹', '`', '*', '_', '°', 'ª', '^', '+', '±', '¢', '®', '"', 'υ',
            '»', '½', '¾', 'h', 'e', '8', 's', 'p', '=', '/', '$', '§', 'ξ', 'u', '6', '9',
            '5', 'y', 'j', 'd', 'q', 'H', 'ç', 'B', 'V', '8', 'Z', 'W', 'S',
            '%', 'e', 'n', 'm', '&', 'à', 'ω', 'Ψ', 'o', '#', 'k', '●', '♦', '♥']

comment utiliser

Ajoutez le code suivant dans la balise :

Activez le plugin avec le code suivant:

$(function () { $("img").matrix(); });

Source de code:

https://www.php.cn/link/90e2217cd253377081205243ac24b03a

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!