JQuery Matrixeffekte

Bringen Sie Matrix Movie Special Effects auf Ihre Webseite! Dies ist ein cooles JQuery -Plugin, das auf dem berühmten Film "The Matrix" basiert. Das Plugin simuliert die klassischen grünen Charakter-Effekte im Film und wählen Sie einfach ein Bild aus, und das Plugin verwandelt es in ein mit numerischer Zeichen gefüllte Bild im Matrix-Stil. Komm und probiere es aus, es ist sehr interessant!

Arbeitsprinzip

Plugin lädt das Bild auf die Leinwand und liest die Pixel- und Farbwerte:

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

Das Plugin liest geschickt den rechteckigen Bereich des Bildes und berechnet JQuery, um die durchschnittliche Farbe jedes Bereichs zu berechnen. Ersetzen Sie dann die Pixel des Bildbereichs durch Zeichen, um Matrixeffekte zu erzielen.

// 获取图片的一部分
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));

Plugin erzeugt viele <b></b> Tags, die jeweils ein Zeichen enthalten:

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

Zeichenauswahl:

dunklere Farben verwenden die vorderen Zeichen und hellere Farben verwenden die hinteren Zeichen.

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', '●', '♦', '♥']

wie man

verwendet

fügen Sie den folgenden Code in das -Tag:

hinzu

Aktivieren Sie das Plugin mit dem folgenden Code:

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

Codequelle:

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

Das obige ist der detaillierte Inhalt vonJQuery Matrixeffekte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!