jQuery 매트릭스 효과

웹 페이지에 매트릭스 영화 특수 효과를 가져 오십시오! 이것은 유명한 영화 "The Matrix"를 기반으로 한 멋진 jQuery 플러그인입니다. 플러그인은 영화에서 클래식 그린 캐릭터 효과를 시뮬레이션하고 사진을 선택하면 플러그인이 숫자로 채워진 매트릭스 스타일 사진으로 변환합니다. 와서 시도해보세요. 매우 흥미 롭습니다!

작동 원리

플러그인은 캔버스에 그림을로드하고 픽셀과 색상 값을 읽습니다.

플러그인은 그림의 직사각형 영역을 영리하게 읽고 jQuery를 사용하여 각 영역의 평균 색상을 계산합니다. 그런 다음 이미지 영역의 픽셀을 문자로 교체하여 매트릭스 효과를 달성하십시오. 플러그인은 각각 문자를 포함하는 많은 태그를 생성합니다.

캐릭터 선택 :

어두운 색상은 프론트 캐릭터를 사용하고 더 밝은 색상은 뒷면 문자를 사용합니다.

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

사용 방법 다음 코드를 태그에 추가하십시오 :

다음 코드로 플러그인을 활성화하십시오

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

코드 소스 : https://www.php.cn/link/90e2217cd253377081205243ac24b03a

<b></b>

위 내용은 jQuery 매트릭스 효과의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!