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