HTML5 시뮬레이션 손전등 조명 효과
<!doctype html>
<html>
<머리>
<meta charset="utf-8">
<title>HTML5模拟Hand电筒光明效果</title>
<스타일>
HTML, 본문 {
높이: 100%;
마진: 0;
}
svg {
디스플레이: 차단;
}
</스타일>
</머리>
<몸>
<svg width="100%" height="100%"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<filter id="light">
<!-- 범프 맵을 덜 선명하게 만들기 위해 소스 이미지를 흐리게 합니다 -->
<feGaussianBlur stdDeviation="3" result="blurred"></feGaussianBlur>
<!-- 알파 채널을 기반으로 범프 맵 만들기 -->
<feColorMatrix in="blurred" type="luminanceToAlpha" result="bumpMap"></feColorMatrix>
<!-- 조명 필터에 범프 맵 사용 -->
<feDiffuseLighting in="bumpMap" SurfaceScale="3" result="light">
<fePointLight x="225" y="150" z="30"></fePointLight>
</feDiffuseLighting>
<!-- 곱셈을 사용하여 소스 이미지로 조명 결과를 구성합니다 -->
<feComposite in="light" in2="SourceGraphic"
연산자="산술"
k1="1" k2="0" k3="0" k4="0">
</feComposite>
</필터>
<패턴 id="패턴1"
width="450" height="300"
PatternUnits="userSpaceOnUse"
>
<이미지 xlink:href="img/codepen.jpg"
width="450" height="300"
></image>
</패턴>
<직사각형 너비="100%" 높이="100%"
fill="url(#pattern1)" 필터="url(#light)"
></right>
</svg>
<스크립트>
const svgNode = document.querySelector('svg');
const fePointLightNode = svgNode.querySelector('fePointLight');
svgNode.addEventListener('mousemove', handlerMove);
svgNode.addEventListener('touchmove', handlerMove);
함수 handlerMove(이벤트) {
fePointLightNode.setAttribute('x', event.clientX);
fePointLightNode.setAttribute('y', event.clientY);
}
<div style="text-align:center;margin:50px 0; 글꼴:normal 14px/24px 'MicroSoft YaHei';">
</div>
</본문>
<html>
<머리>
<meta charset="utf-8">
<title>HTML5模拟Hand电筒光明效果</title>
<스타일>
HTML, 본문 {
높이: 100%;
마진: 0;
}
svg {
디스플레이: 차단;
}
</스타일>
</머리>
<몸>
<svg width="100%" height="100%"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<filter id="light">
<!-- 범프 맵을 덜 선명하게 만들기 위해 소스 이미지를 흐리게 합니다 -->
<feGaussianBlur stdDeviation="3" result="blurred"></feGaussianBlur>
<!-- 알파 채널을 기반으로 범프 맵 만들기 -->
<feColorMatrix in="blurred" type="luminanceToAlpha" result="bumpMap"></feColorMatrix>
<!-- 조명 필터에 범프 맵 사용 -->
<feDiffuseLighting in="bumpMap" SurfaceScale="3" result="light">
<fePointLight x="225" y="150" z="30"></fePointLight>
</feDiffuseLighting>
<!-- 곱셈을 사용하여 소스 이미지로 조명 결과를 구성합니다 -->
<feComposite in="light" in2="SourceGraphic"
연산자="산술"
k1="1" k2="0" k3="0" k4="0">
</feComposite>
</필터>
<패턴 id="패턴1"
width="450" height="300"
PatternUnits="userSpaceOnUse"
>
<이미지 xlink:href="img/codepen.jpg"
width="450" height="300"
></image>
</패턴>
<직사각형 너비="100%" 높이="100%"
fill="url(#pattern1)" 필터="url(#light)"
></right>
</svg>
<스크립트>
const svgNode = document.querySelector('svg');
const fePointLightNode = svgNode.querySelector('fePointLight');
svgNode.addEventListener('mousemove', handlerMove);
svgNode.addEventListener('touchmove', handlerMove);
함수 handlerMove(이벤트) {
fePointLightNode.setAttribute('x', event.clientX);
fePointLightNode.setAttribute('y', event.clientY);
}
<div style="text-align:center;margin:50px 0; 글꼴:normal 14px/24px 'MicroSoft YaHei';">
</div>
</본문>