5分钟实现Canvas鼠标跟随动画背景

关于Canvas制作炫酷背景，我会在git上不定时去更新，并会附上详细的解析，如果有喜欢的话，可以到git上瞧瞧 gitHub传送门 前言 相信很多前端小白都看过这样的背景动画，也好奇如何去实现这种效果！将这种效果应用到自己的个人网站上，会让整个网站变得与众不同！   下面我会直击重点，用最短的时间，使用 Canvas 制作 鼠标跟随动画  如何制作动画 常用的绘图动画的方式有以下几种： CSS3 SVG Canvas WebGL 让我们先分析分析这些方法的优劣性 CSS3 通过css3的关键帧等方式实现动画效果，看起来好像挺实用，但这样增加了一个没有 【Canvas鼠标跟随动画背景详解】 在前端开发中，创造引人入胜的视觉效果是提升用户体验的重要手段之一。本文将详细介绍如何使用HTML5的Canvas元素实现一个炫酷的鼠标跟随动画背景。这种动画效果通常应用于个人网站，可以使得网页显得独特且充满活力。 我们需要了解Canvas的基本概念。Canvas是一个HTML5的标签，它提供了一种在网页上绘制2D图形的方法。通过JavaScript，我们可以控制Canvas的绘图上下文（Context）来绘制线条、形状、图像等。在这个案例中，我们将利用Canvas的绘图功能创建动态的鼠标跟随圆点。 制作鼠标跟随动画，通常有以下几种方式： 1. **CSS3**：利用关键帧（@keyframes）和CSS过渡来实现动画，但这种方法会增加DOM节点，不符合语义化编程原则。 2. **SVG**：SVG是一种使用XML描述2D图形的语言，每个图形都是独立的DOM元素，因此可以使用CSS和JavaScript进行控制。然而，由于每个元素都是DOM，所以频繁修改SVG元素会导致浏览器进行DOM重绘，效率相对较低。 3. **Canvas**：Canvas使用JavaScript绘制2D图形，图形不会单独创建DOM元素，更利于性能优化。适合位图、小游戏、小特效、图表绘制等。 4. **WebGL**：基于Canvas的3D框架，适用于3D展示、动画和游戏，性能强大，但学习曲线较陡峭。 在本例中，我们选择使用Canvas来实现鼠标跟随动画。主要步骤包括： 1. **创建全屏Canvas元素**：获取Canvas元素并设置其宽度和高度等于浏览器窗口的尺寸。 ```javascript var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var WIDTH = canvas.width = document.documentElement.clientWidth; var HEIGHT = canvas.height = document.documentElement.clientHeight; ``` 2. **定义动画参数**：如圆的数量、颜色、半径变化等。 ```javascript var para = { num: 100, color: false, radius: 0.9, o: 0.09 }; ``` 3. **监听鼠标移动事件**：在鼠标移动时，记录鼠标位置并存入圆的数组。 ```javascript window.onmousemove = function(event) { var X = event.clientX; var Y = event.clientY; round_arr.push({X:X, Y:Y, radius:para.radius, o:1}); } ``` 4. **设置颜色**：根据参数para.color决定圆点颜色是随机还是渐变。 ```javascript if (para.color) { circleColor = para.color; } else { color = Math.random() * 360; if (!para.color) { color += .1; circleColor = 'hsl(' + color + ',100%,80%)'; } } ``` 5. **创建动画循环**：通过`requestAnimationFrame`函数实现动画的持续更新。 ```javascript function animate() { if (!para.color) { color += .1; circleColor = 'hsl(' + color + ',100%,80%)'; } ctx.clearRect(0, 0, WIDTH, HEIGHT); // 绘制圆点的代码... requestAnimationFrame(animate); } animate(); // 启动动画 ``` 6. **绘制圆点**：遍历数组，根据圆心坐标、半径和颜色绘制圆，并检查是否满足消失条件。 ```javascript for (var i = 0; i < round_arr.length; i++) { var circle = round_arr[i]; if (circle.o >= 1) { round_arr.splice(i, 1); i--; } else { circle.o += para.o; ctx.beginPath(); ctx.fillStyle = circleColor; ctx.arc(circle.X, circle.Y, circle.radius * circle.o, 0, Math.PI*2, false); ctx.fill(); } } ``` 以上步骤详细解释了如何用Canvas实现鼠标跟随动画背景。通过这种方式，用户在浏览网页时，鼠标移动到哪里，哪里就会出现跟随的彩色圆点，给用户带来独特的交互体验。同时，这个案例也为学习Canvas动画提供了一个基础模板，可以在此基础上进行更多的创新和扩展。