canvas纹理动画-html代码-BFW代码库

canvas纹理动画

代码语言：html

所属分类：动画

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body {
  background:#f0f0f5;
  overflow:hidden;
  margin:0;
  padding:0;
}

.cv {
  position:absolute;
  left:5px;
  top:5px;
  cursor:move;
  margin:0;
  padding:0;
}

.cv2 {
  position:absolute;
  left:0px;
  top:0px;
  cursor:move;
  margin:0;
  padding:0;
}



#test {
  position: absolute;
  visibility: hidden;
  height: auto;
  width: auto;
  white-space: nowrap; 
  font-family:Alfa Slab One;
  margin:0;
  padding:0;
}

#mouseInfo {
  position:absolute;
  left:10px;
  top:3px;
  color:blue;
  background:lightyellow;
  width:200px;
  height:30px;
  display:none;
}
</style>

<link href="https://fonts.googleapis.com/css?family=Alfa+Slab+One&display=swap" rel="stylesheet">
</head>


<body>
<canvas id="c1" class="cv"></canvas>
<canvas id="c2" class="cv"></canvas>
<canvas id="c3" class="cv"></canvas>
<canvas id="c4" class="cv"></canvas>
<canvas id="c5" class="cv"></canvas>
<canvas id="c6" class="cv"></canvas>
<canvas id="c7" class="cv2"></canvas>
<div id="mouseInfo"></div>
<div id="test"></div>


<script >
let w,h;

function pageSetup() {
  
  pageResize();
  
  // top most layer...
  const c7Nd = document.getElementById("c7");
  c7Nd.addEventListener('mousemove', captureMouse);
}


function pageResize() {
  w = window.innerWidth;
  h = window.innerHeight;
  
  drawTexture1(1, "#c2c2d6");
  drawTexture1(2, "#a3a3c2");
  drawTexture1(3, "#7575a3");
  drawTexture1(4, "#47476b");
  drawTexture1(5, "#ffdd99");
  drawTexture1(6, "#ffcc66");
  drawTextureText(7, "#e0e0eb", "Texture");
}


window.addEventListener('load', pageSetup);
window.addEventListener('resize', pageResize);



function textureSetup(nIdx, nOffset) {
  const cvs = document.getElementById("c"+nIdx);
  cvs.style.width = (w-nOffset)+"px";
  cvs.style.height = (h-nOffset)+"px";
  cvs.width = (w-nOffset);
  cvs.height = (h-nOffset);
  const vwContext = cvs.getContext('2d');
  
  return vwContext;
} // end of function textureSetup()


function drawTexture1(nIdx, sColor) {
  const vwContext = textureSetup(nIdx, 10);
  
 // vwContext.globalAlpha=0;
  vwContext.fillStyle = 'rgba(255, 0, 0, 0)';
  vwContext.fillRect(0, 0, w-2, h-2);
 // console.log("got here 1")
//  vwContext.globalAlpha=1;
  //console.log("got here 2")
  
  vwContext.fillStyle = sColor;
  
  let nTotalDots = 32000;
  
  for (let n=0;n<nTotalDots;n++) {
    const x1 = rnd(w-12);
    const y1 = rnd(h-12);
    let sz = rnd(3);
    
    if (sz < .5) {
      sz = .5;
    }
    vwContext.fillRect(x1, y1, sz, sz);
  } // next n
  //console.log("got here 3")
} // end of function drawTexture1()

let nTextWidth = 0;

function drawTextureText(nIdx, sBgColor, sText) {
  const vwContext = textureSetup(nIdx, 0);
  let nFontSize = h * .8;
  
  
  
  vwContext.........完整代码请登录后点击上方下载按钮下载查看