[趣味代码] 鼠标点击效果：一款好玩的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就可以实现了。