基於canvas繪製的一個跟隨滑鼠變幻的動態背景線條
特點:
1、不依賴jQuery等任何框架或者內庫
2、原生javascript
3、使用外鏈
4、JS檔案已經儲存在CDN上,可以直接使用,支援ssl協議外鏈,github的外鏈
【引用程式碼】
1.<script type="text/javascript" src="https://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>
【JS程式碼】
!function(){function n(n,e,t){return n.getAttribute(e)||t}function e(n){return document.getElementsByTagName(n)}function t(){var t=e("script"),o=t.length,i=t[o-1];return{l:o,z:n(i,"zIndex",-1),o:n(i,"opacity",.5),c:n(i,"color","0,0,0"),n:n(i,"count",99)}}function o(){a=m.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,c=m.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight}function i(){r.clearRect(0,0,a,c);var n,e,t,o,m,l;s.forEach(function(i,x){for(i.x+=i.xa,i.y+=i.ya,i.xa*=i.x>a||i.x<0?-1:1,i.ya*=i.y>c||i.y<0?-1:1,r.fillRect(i.x-.5,i.y-.5,1,1),e=x+1;e<u.length;e++)n=u[e],null!==n.x&&null!==n.y&&(o=i.x-n.x,m=i.y-n.y,l=o*o+m*m,l<n.max&&(n===y&&l>=n.max/2&&(i.x-=.03*o,i.y-=.03*m),t=(n.max-l)/n.max,r.beginPath(),r.lineWidth=t/2,r.strokeStyle="rgba("+d.c+","+(t+.2)+")",r.moveTo(i.x,i.y),r.lineTo(n.x,n.y),r.stroke()))}),x(i)}var a,c,u,m=document.createElement("canvas"),d=t(),l="c_n"+d.l,r=m.getContext("2d"),x=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(n){window.setTimeout(n,1e3/45)},w=Math.random,y={x:null,y:null,max:2e4};m.id=l,m.style.cssText="position:fixed;top:0;left:0;z-index:"+d.z+";opacity:"+d.o,e("body")[0].appendChild(m),o(),window.onresize=o,window.onmousemove=function(n){n=n||window.event,y.x=n.clientX,y.y=n.clientY},window.onmouseout=function(){y.x=null,y.y=null};for(var s=[],f=0;d.n>f;f++){var h=w()*a,g=w()*c,v=2*w()-1,p=2*w()-1;s.push({x:h,y:g,xa:v,ya:p,max:6e3})}u=s.concat([y]),setTimeout(function(){i()},100)}();
相關文章
- canvas 繪製線條Canvas
- JavaScript:一個滑鼠動態跟隨文字特效的示例 (轉)JavaScript特效
- 【canvas】箭頭跟隨滑鼠移動的動畫原理Canvas動畫
- canvas 按住滑鼠拖動 繪製文字Canvas
- canvas繪製滑鼠懸浮可以變大的立體小球Canvas
- 基於 D3.js 繪製動態進度條JS
- canvas繪製帶有漸變效果的直線Canvas
- canvas實現的跟隨滑鼠的彩色絲帶效果Canvas
- js跟隨滑鼠移動的元素JS
- canvas繪製直線Canvas
- js按住滑鼠繪製線條程式碼例項JS
- canvas實現的按住滑鼠拖動能夠繪製文字效果Canvas
- canvas基礎之動態線條---致敬windows98CanvasWindows
- canvas 繪製雙線技巧Canvas
- 滑鼠懸浮具有背景動畫跟隨效果的導航選單動畫
- canvas實現的變幻線程式碼例項Canvas線程
- JavaScript 元素跟隨滑鼠運動JavaScript
- JavaScript跟隨滑鼠移動的圖片效果JavaScript
- JavaScript WebGL 繪製一條直線JavaScriptWeb
- canvas繪製sin正弦曲線Canvas
- 用canvas繪製一個曲線動畫——深入理解貝塞爾曲線Canvas動畫
- jQuery背景滑動跟隨的導航選單jQuery
- jQuery跟隨滑鼠移動的彈出層效果jQuery
- 使用canvas繪製圓形進度條Canvas
- 用Canvas畫一隻會跟著滑鼠走的小狗Canvas
- canvas繪製動畫的技巧Canvas動畫
- canvas繪製網格射線效果Canvas
- 基於canvas實現波浪式繪製圖片Canvas
- JS特效--跟隨滑鼠移動的日曆時鐘JS特效
- 基於 HTML5 Canvas 繪製的電信網路拓撲圖HTMLCanvas
- 原生JS控制多個滾動條同步跟隨滾動JS
- Chart.js繪製動態折線圖JS
- canvas核心技術-如何繪製線段Canvas
- canvas繪製經典星空連線效果Canvas
- html5中canvas繪製線段HTMLCanvas
- canvas繪製不重合的圓Canvas
- JavaScript拖動滑鼠繪製矩形方框JavaScript
- 一個基於canvas的移動端圖片編輯器Canvas