黑客帝国背景js特效

官方

https://github.com/stevenjoezhang/canvas-matrix.js

Butterfly

_config.butterfly.yml 相应位置修改

inject:
  head:
  bottom:
    - <script defer src="https://cdn.jsdelivr.net/npm/canvas-matrix.js@0/canvas-matrix.min.js" size="20" font="arial"></script>

其他主题

页脚加入 js

1	<script defer src="https://cdn.jsdelivr.net/npm/canvas-matrix.js@0/canvas-matrix.min.js" size="20" font="arial"></script>

附件js内容

(function(){const scripts=document.getElementsByTagName("script"),script=scripts[scripts.length-1],fontSize=script.getAttribute("size")||16,fontName=script.getAttribute("font")||"monospace";const canvas=document.createElement("canvas"),context=canvas.getContext("2d");document.body.appendChild(canvas);canvas.style.cssText="position: fixed; top: 0; left: 0; background-color: #111; z-index: -1;";let W=window.innerWidth,H=window.innerHeight;canvas.width=W;canvas.height=H;let colunms=Math.floor(W/fontSize),drops=[],str="QWERTYUIOPASDFGHJKLZXCVBNM!@#$%^&*()1234567890qwertyuiopasdfghjklzxcvbnm";for(let i=0;i<colunms;i++){drops.push(Math.ceil(canvas.height/fontSize)+1)}setInterval((function(){context.fillStyle="rgba(0,0,0,0.05)";context.fillRect(0,0,W,H);context.font=`700 ${fontSize}px ${fontName}`;context.fillStyle="#00cc33";for(let i=0;i<colunms;i++){const index=Math.floor(Math.random()*str.length),x=i*fontSize,y=drops[i]*fontSize;context.fillText(str[index],x,y);if(y>=canvas.height&&Math.random()>.99){drops[i]=0}drops[i]++}}),120);window.addEventListener("resize",(function(){W=window.innerWidth;H=window.innerHeight;canvas.width=W;canvas.height=H;colunms=Math.floor(W/fontSize);drops=[];for(let i=0;i<colunms;i++){drops.push(Math.ceil(canvas.height/fontSize)+1)}}))})();