鼠标点击效果:一款好玩的canvas背景

  • 内容
  • 相关

鼠标点击效果:一款好玩的canvas背景

使用方法

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()  

CSS代码

canvas { position: absolute;  
              top: 0;  
              left: 0;  
              z-index: 0;  
              width: 100%;  
              height: 100%;  
              pointer-events: none;  
}

调用代码

<canvas></canvas>

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

本文标签:这篇文章木有标签

版权声明:若无特殊注明,本文皆为《枫叶》原创,转载请保留文章出处。

本文链接:https://www.maple5.com/technology/659.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注