canvas实现线条平面波动动画效果代码

代码语言:html

所属分类:动画

代码描述:canvas实现线条平面波动动画效果代码

代码标签: canvas 线条 平面 波动 动画

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

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
 
<style>
    * {margin: 0; padding: 0;}

canvas {display: block;}
</style>
</head>
<body>
<!-- partial:index.partial.html -->
<canvas><canvas>
<!-- partial -->
  <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, y2d, c;

  .........完整代码请登录后点击上方下载按钮下载查看

网友评论0