1. 首页
  2. 前端

使用canvas实现动态绚丽的线条动画实例1

在闲暇时间,抽空写一个基于html5 canvas的线条动画,对于canvas技术的使用方法这里就不介绍了,不会的小伙伴可以抽空学习下。

这个小例子是用canvas写的一个动态线条动画,可以用于页面背景装饰,效果和完整代码如下:

使用canvas实现动态绚丽的线条动画实例1

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

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

</head>

<body>
  <canvas></canvas>

  <script>
    function canvasAnimate() {
      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 = '#17293aff';
        ctx.fillRect(0, 0, W, H);
        render(ts);
      }())
    }
    window.onload=window.onresize=function(){
      canvasAnimate()
    }
  </script>
</body>
</html>

 

原创文章,作者:Ferrycoln,如若转载,请注明出处:https://ms200.cn/archives/893

发表评论

电子邮件地址不会被公开。 必填项已用*标注

联系我们

在线咨询:点击这里给我发消息

邮件:499661635@qq.com.com

工作时间:周一至周五,9:30-18:30

QR code