devbox
笔触狂放9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

JS特效第132弹：canvas圆点分散光标跟随动画特效代码

作者：笔触狂放9 | 2024-02-16 05:10:05

赞

踩

JS特效第132弹：canvas圆点分散光标跟随动画特效代码

        基于canvas制作跟随鼠标移动的彩色圆点粒子分散动画特效 ，先来看看效果：

        一部分关键的代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5. <meta charset="UTF-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title></title>
  8.  
  9. <style>
  10. * {
  11. 	margin: 0;
  12. 	padding: 0;
  13. }
  14.  
  15. body {
  16. 	overflow: hidden;
  17. }
  18.  
  19. canvas {
  20. 	background-color: black;
  21. 	transition: all .2s;
  22. }
  23. </style>
  24.  
  25. </head>
  26.  
  27. <body>
  28.  
  29. <canvas id="canvas"></canvas>
  30. <script circleWidth='10' id="cvs">
  31.  /** @type {HTMLCanvasElement} */
  32. // 初始化画板
  33. const canvas = document.querySelector('#canvas');
  34. canvas.width = window.innerWidth;
  35. canvas.height = window.innerHeight;
  36.  
  37. // 初始化画笔
  38. const cvs = canvas.getContext('2d');
  39. let CircleArr = [];
  40.  
  41. // 实例化对象
  42.  
  43. canvas.addEventListener('mousemove', function (ev) {
  44.    let cir = new Circle(ev.pageX, ev.pageY);
  45.    CircleArr.push(cir);
  46. })
  47.  
  48. canvas.addEventListener('touchmove', function (ev) {
  49.    let cir = new Circle(ev.touches[0].clientX, ev.touches[0].clientY);
  50.    CircleArr.push(cir);
  51. })
  52.  
  53. /**
  54. * 主要参数位置
  55. */
  56. function Circle(X, Y) {
  57.    this.X = Math.floor(X);
  58.    this.Y = Math.floor(Y);
  59.    this.speedX = Math.floor((Math.random() - 0.5) * 4);
  60.    this.speedY = Math.floor((Math.random() - 0.5) * 4);
  61.    this.A = 1;
  62.    this.R = +document.getElementById('cvs').getAttribute('circleWidth') || 20;
  63.  
  64. }
  65.  
  66. Circle.prototype = {
  67.    // 画圆
  68.    draw() {
  69. 	   cvs.beginPath();
  70. 	   cvs.fillStyle =
  71. 		   `rgb(${Math.floor(Math.random()*255)},${Math.floor(Math.random()*255)},${Math.floor(Math.random()*255)})`;
  72. 	   cvs.globalCompositeOperation = "lighter";
  73. 	   cvs.globalAlpha = this.A;
  74. 	   cvs.arc(this.X, this.Y, this.R, 0, Math.PI * 2);
  75. 	   cvs.fill();
  76. 	   this.upDate();
  77.    },
  78.    // 更新圆的状态
  79.    upDate() {
  80. 	   this.X += this.speedX;
  81. 	   this.Y += this.speedY;
  82. 	   this.A *= 0.98;
  83.    }
  84. }
  85.  
  86. // 清除重画
  87. function render() {
  88.    cvs.clearRect(0, 0, canvas.width, canvas.height);
  89.    CircleArr.forEach(function (ele, i) {
  90. 	   ele.draw();
  91. 	   // 删除已经执行完的圆优化性能
  92. 	   if (ele.A < 0.03) {
  93. 		   CircleArr.splice(i, 1)
  94. 	   }
  95.    });
  96.    //关键帧的刷新
  97.    requestAnimationFrame(render);
  98. }
  99. render()
  100. </script>
  101. 	
  102. </body>
  103.  
  104. </html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/90968
推荐阅读