js实现canvas网格线条波浪波纹起伏动画背景效果代码

代码语言:html

所属分类:动画

代码描述:js实现canvas网格线条波浪波纹起伏动画背景效果代码

代码标签: 网格 线条 波浪 波纹 起伏 动画 背景 效果

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

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title> </title>

    <style>
        * {
        	margin:0;
        	padding:0;
        }
        canvas {
        	display:block;
        }
    </style>

</head>

<body>

    <canvas><canvas>

<script>
var canvas = document.body.querySelector('canvas'),
    ctx = canvas.getContext('2d'),
    W = canvas.width = window.innerWidth,
    H = canvas.height = window.innerHeight,
    pixels = [];

for (var x = -400; x < 400; x += 5) {
  for (var z = -250; z < 250; z += 5) {
    pixels.push({x: x, y: 100, z: z});
  }  
}

function render(ts) {
  var imageData = ctx.getImageData(0, 0, W, H),
      len = pixels.length,
      fov = 250,
      pixel, scale,
      x2d, .........完整代码请登录后点击上方下载按钮下载查看

网友评论0