html5调用手电筒,HTML5的模拟手电筒照明效果

一款挺逼真的HTML5模拟手电筒照明效果，HTML5 SVG实现手电筒照射地面光亮特效，光亮跟随鼠标指针移动。

HTML5模拟手电筒照明效果

html, body {

height: 100%;

margin: 0;

}

svg {

display: block;

}

xmlns="http://www.w3.org/2000/svg"

xmlns:xlink="http://www.w3.org/1999/xlink"

>

operator="arithmetic"

k1="1" k2="0" k3="0" k4="0">

width="450" height="300"

patternUnits="userSpaceOnUse"

>

width="450" height="300"

>

fill="url(#pattern1)" filter="url(#light)"

>

const svgNode = document.querySelector('svg');

const fePointLightNode = svgNode.querySelector('fePointLight');

svgNode.addEventListener('mousemove', handleMove);

svgNode.addEventListener('touchmove', handleMove);

function handleMove(event) {

fePointLightNode.setAttribute('x', event.clientX);

fePointLightNode.setAttribute('y', event.clientY);

}

申明：本站所有资源都是转载各大下载站，或由网友投稿发布，请自行检测软件的完整性，如有侵权请联系我们删除下架，联系方式：admin@php.cn