环创资源网 · 免费提供绿色软件、SEO优化以及其他网络资源,好货不私藏!

有趣的鼠标单击效果:画布背景

环创工作室 特效代码 0 热度 146 收藏 0

我在其他人的网站上看到了这种画布背景,这立刻令人赞叹。 我发现这很有趣。 鼠标单击改变了,这很有趣。 保存以备后用,并推荐给大家,哈哈。

201807171531837613895767[2].gif

1、JS代码

document.addEventListener('touchmove', function (e) {  

                e.preventDefault()  

            })  

            var c = document.getElementsByTagName('canvas')[0],  

                x = c.getContext('2d'),  

                pr = window.devicePixelRatio || 1,  

                w = window.innerWidth,  

                h = window.innerHeight,  

                f = 90,  

                q,  

                m = Math,  

                r = 0,  

                u = m.PI*2,  

                v = m.cos,  

                z = m.random  

            c.width = w*pr  

            c.height = h*pr  

            x.scale(pr, pr)  

            x.globalAlpha = 0.6  

            function i(){  

                x.clearRect(0,0,w,h)  

                q=[{x:0,y:h*.7+f},{x:0,y:h*.7-f}]  

                while(q[1].x<w+f) d(q[0], q[1])  

            }  

            function d(i,j){     

                x.beginPath()  

                x.moveTo(i.x, i.y)  

                x.lineTo(j.x, j.y)  

                var k = j.x + (z()*2-0.25)*f,  

                    n = y(j.y)  

                x.lineTo(k, n)  

                x.closePath()  

                r-=u/-50  

                x.fillStyle = '#'+(v(r)*127+128<<16 | v(r+u/3)*127+128<<8 | v(r+u/3*2)*127+128).toString(16)  

                x.fill()  

                q[0] = q[1]  

                q[1] = {x:k,y:n}  

            }  

            function y(p){  

                var t = p + (z()*2-1.1)*f  

                return (t>h||t<0) ? y(p) : t  

            }  

            document.onclick = i  

            document.ontouchstart = i  

            i()  

2、CSS代码

canvas { position: absolute;  

              top: 0;  

              left: 0;  

              z-index: 0;  

              width: 100%;  

              height: 100%;  

              pointer-events: none;  

}  

3、调用代码

<canvas></canvas>  

添加方法很简单,一段JS配合CSS就可以实现了。

免责声明

本站提供的一切软件、教程和内容信息仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络收集整理,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序和内容,请支持正版,购买注册,得到更好的正版服务。我们非常重视版权问题,如有侵权请邮件与我们联系处理。敬请谅解!

评论列表
系统已开启自动识别垃圾评论机制,请自觉遵守互联网相关的政策法规,发现永久封IP禁止访问!
  • 点击我更换图片
  • 全部评论(0
    还没有评论,快来抢沙发吧!