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

因为闲鱼是一个动漫卡通迷,在别人的网站看到了这个canvas背景,瞬间被惊艳到了,觉得好有趣,鼠标点击就变化,好玩。不过闲鱼暂时还没想到把它用在哪里,先保存下来待用,顺便推荐给大家,哈哈。

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

使用方法

1、JS代码

  1. document.addEventListener('touchmove', function (e) {  
  2.                 e.preventDefault()  
  3.             })  
  4.             var c = document.getElementsByTagName('canvas')[0],  
  5.                 x = c.getContext('2d'),  
  6.                 pr = window.devicePixelRatio || 1,  
  7.                 w = window.innerWidth,  
  8.                 h = window.innerHeight,  
  9.                 f = 90,  
  10.                 q,  
  11.                 m = Math,  
  12.                 r = 0,  
  13.                 u = m.PI*2,  
  14.                 v = m.cos,  
  15.                 z = m.random  
  16.             c.width = w*pr  
  17.             c.height = h*pr  
  18.             x.scale(pr, pr)  
  19.             x.globalAlpha = 0.6  
  20.             function i(){  
  21.                 x.clearRect(0,0,w,h)  
  22.                 q=[{x:0,y:h*.7+f},{x:0,y:h*.7-f}]  
  23.                 while(q[1].x<w+f) d(q[0], q[1])  
  24.             }  
  25.             function d(i,j){     
  26.                 x.beginPath()  
  27.                 x.moveTo(i.x, i.y)  
  28.                 x.lineTo(j.x, j.y)  
  29.                 var k = j.x + (z()*2-0.25)*f,  
  30.                     n = y(j.y)  
  31.                 x.lineTo(k, n)  
  32.                 x.closePath()  
  33.                 r-=u/-50  
  34.                 x.fillStyle = '#'+(v(r)*127+128<<16 | v(r+u/3)*127+128<<8 | v(r+u/3*2)*127+128).toString(16)  
  35.                 x.fill()  
  36.                 q[0] = q[1]  
  37.                 q[1] = {x:k,y:n}  
  38.             }  
  39.             function y(p){  
  40.                 var t = p + (z()*2-1.1)*f  
  41.                 return (t>h||t<0) ? y(p) : t  
  42.             }  
  43.             document.onclick = i  
  44.             document.ontouchstart = i  
  45.             i()  

2、CSS代码

  1. canvas { positionabsolute;  
  2.               top: 0;  
  3.               left: 0;  
  4.               z-index: 0;  
  5.               width: 100%;  
  6.               height: 100%;  
  7.               pointer-events: none;  
  8. }  

3、调用代码

  1. <canvas></canvas>  

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

发表评论

:?::razz::sad::evil::!::smile::oops::grin::eek::shock::???::cool::lol::mad::twisted::roll::wink::idea::arrow::neutral::cry::mrgreen:

目前评论:49   其中:访客  27   博主  22

    • 猫鼬博客 猫鼬博客 3 来自天朝的朋友 谷歌浏览器 Windows 7 四川省成都市双流县 电信

      配合我的爆炸烟花,极好 极好!

        • 闲鱼 闲鱼 【博主】 WordPress for iOS iPhone & iPad 日本

          @猫鼬博客 你这是要逆天啊,不要添加得太多哦

        • Koolight Koolight 5 来自天朝的朋友 谷歌浏览器 Windows XP 湖北省 移动

          这个评论信息条好长啊!

          • Xiaomo Xiaomo 1 来自天朝的朋友 火狐浏览器 Windows 10 广西 电信

            不错,长见识了,先收下了,万一那天有用呢 :smile:

            • mashiro mashiro 0 来自天朝的朋友 谷歌浏览器 Windows 10 上海市 电信

              求现在网站这个滑稽的鼠标特效(#滑稽)

                • 闲鱼 闲鱼 【博主】 来自天朝的朋友 QQ浏览器 Windows 7 湖南省常德市 电信

                  @mashiro 自己扒吧,就是一个鼠标样式而已

                • 丫丫-自动化节能设备 丫丫-自动化节能设备 2 来自天朝的朋友 谷歌浏览器 Windows 7 山东省 联通

                  挺不错的,感谢分享

                  • 悟空 悟空 1 来自天朝的朋友 火狐浏览器 Windows 10 浙江省台州市 移动

                    很有趣阿,感觉不知道什么时候可能会用上,那就先MARK一记,嘿嘿。

                      • 闲鱼 闲鱼 【博主】 来自天朝的朋友 Safari浏览器 iPad OS 10_2 like Mac OS X) AppleWebKit 湖南省岳阳市 移动

                        @悟空 嗯,还是要看搭配合不合适才用得上