html5 canvas正弦波像素网格波浪动画特效

来源:https://www.sucaihuo.com/js/3920.html 2018-09-09 11:35浏览(1636) 收藏

html5 canvas正弦波像素网格波浪动画特效,波浪弧度起伏有一种3D视觉效果。
html5 canvas正弦波像素网格波浪动画特效
分类:html5 > canvas 难易:初级
查看演示 下载资源 下载积分: 10 积分

js代码

<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;

  for (var i = 0; i < len; i++) {
    pixel = pixels[i];
    scale = fov / (fov + pixel.z);
    x2d = pixel.x * scale + W / 2;
    y2d = pixel.y * scale + H / 2;
    if(x2d >= 0 && x2d <= W && y2d >= 0 && y2d <= H) {
      c = (Math.round(y2d) * imageData.width + Math.round(x2d)) * 4;
      imageData.data[c] = 17;
      imageData.data[c + 1] = 122;
      imageData.data[c + 2] = 181;
      imageData.data[c + 3] = 255;
    }
    pixel.z -= 0.4;
    pixel.y = H / 14 + Math.sin(i / len * 15 + (ts / 450)) * 10;
    if (pixel.z < -fov) pixel.z += 2 * fov;
  }
  ctx.putImageData(imageData, 0, 0);
}

(function drawFrame(ts){
  requestAnimationFrame(drawFrame, canvas);
  ctx.fillStyle = '#17293a';
  ctx.fillRect(0, 0, W, H);
  render(ts);
}());</script>
标签: 波浪动画
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2