canvas实现粒子跟随鼠标

最新推荐文章于 2023-07-03 16:48:52 发布

只会cv的小前端

最新推荐文章于 2023-07-03 16:48:52 发布

阅读量362

点赞数

分类专栏： css 文章标签： css3

本文链接：https://blog.csdn.net/Wancc123/article/details/121033631

版权

css 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script>
    var cn;
    var c;
    var u = 10;
    const m = {
      x: 0,
      y: 0
    };
    // 获取鼠标移动的位置
    window.onmousemove = function (e) {
      m.x = e.clientX;
      m.y = e.clientY;
    }
    // 设置随机颜色
    function gc() {
      var s = "0123456789ABCDEF";
      var c = "#";
      for (var i = 0; i < 6; i++) {
        c += s[Math.ceil(Math.random() * 15)]
      }
      return c
    }
    var a = [];
    // 创建画布
    window.onload = function myfunction() {
      cn = document.getElementById('cw');
      c = cn.getContext('2d');
      c.lineWidth = "2"; //多粗的线
      c.globalAlpha = 0.5; //透明度
      resize();
      anim()
    }

    function ob(x, y, r, cc, o, s) {
      this.x = x;
      this.y = y;
      this.r = r;
      this.cc = cc;
      this.theta = Math.random() * Math.PI * 2;
      this.s = s;
      this.o = o;
      this.t = Math.random() * 150;
      this.o = o;
      this.dr = function () {
        const ls = {
          x: this.x,
          y: this.y
        };
        this.theta += this.s;
        // 随机角度圆弧  这是转起来的必要
        this.x = m.x + Math.cos(this.theta) * this.t;
        this.y = m.y + Math.sin(this.theta) * this.t;

        c.beginPath(); //开始一段新路径
        c.lineWidth = this.r;
        c.strokeStyle = this.cc;
        c.moveTo(ls.x, ls.y);//先保存一个坐标
        c.lineTo(this.x, this.y);// 从moveTo提供的坐标绘制到现在这个坐标
        c.stroke(); //通过此函数将以上绘制的图形绘制到画布上
        c.closePath();// 使用闭合路径解决锯齿(自动将起点和结束点连接起来)
      }
    }
    // canvas自适应页面宽度 
    function resize() {
      cn.height = innerHeight;
      cn.width = innerWidth;
      for (var i = 0; i < 180; i++) {
        // 创建元素
        a[i] = new ob(innerWidth / 2, innerHeight / 2, 4, gc(), Math.random() * 200 + 20, 0.02);
      }
    }
    // window.requestAnimationFrame() 方法跟 setTimeout 类似，都是推迟某个函数的执行。不同之处在于，setTimeout 必须指定推迟的时间;
    // window.requestAnimationFrame() 则是推迟到浏览器下一次重流时执行，执行完才会进行下一次重绘。重绘通常是 16.7ms(60fps / s) 执行一次，不过浏览器会自动调节这个速率，比如网页切换到后台 Tab 页时
    // ，window.requestAnimationFrame() 会暂停执行。
    // 如果某个函数会改变网页的布局，一般就放在 window.requestAnimationFrame() 里面执行，这样可以节省系统资源，使得网页效果更加平滑。因为慢速设备会用较慢的速率重流和重绘，而速度更快的设备会有更快的速率。
    // 该方法接受一个回调函数作为参数 window.requestAnimationFrame(callback)  window.cancelAnimationFrame()，用来取消回调函数的执行。

    function anim() {
      requestAnimationFrame(anim);   // 动画
      c.fillStyle = "rgba(0.5,0,0,0.05)"; // 背景填充黑色  让路径隐藏
      c.fillRect(0, 0, cn.width, cn.height); // 画一个矩形  宽高与页面一样  填充上面黑色
      a.forEach(function (e, i) {
        e.dr();
      });

    }
    // setInterval(() => {
    //   anim()
    // }, 100)
  </script>
  <style>
    #cw {
      position: fixed;
      z-index: -1;
    }

    body {
      margin: 0;
      padding: 0;
      background-color: rgba(0, 0, 0, 0.05);
    }
  </style>
</head>

<body>
  <canvas id="cw">您的浏览器不支持canvas,请升级您的浏览器</canvas>
</body>

</html>

只会cv的小前端

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas实现粒子跟随鼠标

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document&l
复制链接

扫一扫