鼠标点击效果:一款好玩的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:

目前评论:94   其中:访客  26   博主  21

    • 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 湖南省岳阳市 移动

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

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

                    很神奇的感觉,博主懂得真多!

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

                        @Koolight 主要是看到有趣的东西忍不住收藏一下

                      • 无人小站 无人小站 2 未知系统 谷歌浏览器 Windows 10 运营商级NAT(宽带运营商局域网)

                        看起来不错留个名先 :mrgreen: :mrgreen: :mrgreen:

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

                            @无人小站 此处有掌声

                          • 宅小猫 宅小猫 0 来自天朝的朋友 谷歌浏览器 Windows 7 河南省郑州市 电信

                            挺炫的说,就是有点花了 :mrgreen:

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

                                @宅小猫 这个搭配好的话不会太花的,我看过别人弄的就很不错

                              • 懿古今 懿古今 4 来自天朝的朋友 谷歌浏览器 Windows XP 广西南宁市 电信

                                效果看起来很牛,不过一般站点好像用不上

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

                                    @懿古今 嗯,比较小众,觉得蛮好看的,先保存看以后能不能用到

                                  • 姜辰 姜辰 3 火狐浏览器 Windows 10 北美地区

                                    挺绚丽的!~~

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

                                        @姜辰 是的,哈哈,不过要用得上还是比较少的