• 欢迎访问雨丝林森网站,WordPress信息,WordPress教程,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏雨丝林森吧
  • 本站所有资料来源于网络,免费分享下载,请下载后自行杀毒与测试,请保留好开发者的相关版权信息

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

其它技术 一 树 3年前 (2018-01-21) 316次浏览 已收录 1个评论 扫描二维码

使用方法

1、JS代码

    document.addEventListener('touchmove', function (e) {  
                    e.preventDefault()  
                })  
                var c = document.getElementsByTagName('<a href="https://www.58sou.net/tag/canvas" title="查看更多关于canvas的文章" target="_blank">canvas</a>')[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代码

    <a href="https://www.58sou.net/tag/canvas" title="查看更多关于canvas的文章" target="_blank">canvas</a> { position: absolute;  
                  top: 0;  
                  left: 0;  
                  z-index: 0;  
                  width: 100%;  
                  height: 100%;  
                  pointer-events: none;  
    }

3、调用代码

<<a href="https://www.58sou.net/tag/canvas" title="查看更多关于canvas的文章" target="_blank">canvas</a>></<a href="https://www.58sou.net/tag/canvas" title="查看更多关于canvas的文章" target="_blank">canvas</a>>

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


雨丝林森, 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:一款好玩的canvas背景:鼠标点击效果
喜欢 (1)
[zgcf2008@163.com]
分享 (0)

您必须 登录 才能发表评论!

(1)个小伙伴在吐槽
  1. 签到成功!签到时间:2019-01-10 22:41:04,每日打卡,生活更精彩哦~
    一 树2019-01-10 22:41 Windows 7 | Chrome 49.0.2623.112