html5canvas实现的跟随鼠标移动圆圈气泡动画特效源码.zip资源-CSDN文库

共1个文件

html：1个

版权申诉

45 浏览量 2022-11-03 23:34:22 上传评论收藏 2KB ZIP 举报

HTML5 Canvas 是一种在网页上绘制图形的API，它允许开发者直接通过JavaScript代码来描绘出丰富的二维图形。这个"html5 canvas实现的跟随鼠标移动圆圈气泡动画特效源码.zip"文件，显然包含了利用Canvas API创建的一个互动式动画效果，即当鼠标在页面上移动时，一些圆形气泡会跟随鼠标移动的轨迹产生动态效果。我们来详细了解一下HTML5 Canvas的基本概念。Canvas是一个基于矢量图形的画布，它可以被用JavaScript来绘制图像。在HTML中，我们通过`<canvas>`标签来创建一个画布，然后通过JavaScript的`CanvasRenderingContext2D`对象提供的方法进行绘图操作，如绘制线条、形状、文本、图像等。在本项目中，核心的实现部分可能包括以下几点： 1. **事件监听**：需要监听鼠标的`mousemove`事件，以便获取鼠标的位置信息。这可以通过`addEventListener`函数实现，对`mousemove`事件绑定处理函数。 2. **绘制圆圈**：在`mousemove`事件的处理函数中，使用`CanvasRenderingContext2D`的`beginPath`、`arc`、`fill`或`stroke`等方法绘制圆圈。`arc`方法用于创建一个圆形路径，参数通常包括圆心坐标、半径、起始角度和结束角度。 3. **动画更新**：为了创建动画效果，我们需要在每次`mousemove`事件触发后更新画布。这通常通过清除画布（`clearRect`）然后再重新绘制所有元素来实现。同时，可以为每个圆圈设置不同的透明度、大小、速度等属性，使其呈现出不同的动态效果。 4. **气泡跟随**：为了让圆圈“跟随”鼠标移动，圆心的坐标应与鼠标位置有关。可以设定一定的偏移值，使圆圈并非完全位于鼠标位置，而是围绕鼠标移动。 5. **重绘循环**：为了实现连续的动画效果，需要在每帧之间进行重绘。可以使用`requestAnimationFrame`函数，它会在浏览器下一次重绘之前调用指定的回调函数，从而创建流畅的动画。 6. **样式控制**：可以调整气泡的颜色、半径、透明度等属性，以创建各种视觉效果。例如，可以设置一个数组存储不同气泡的属性，然后随机选择这些属性来增加多样性。 7. **性能优化**：为了提高性能并避免不必要的重绘，可以使用`shouldComponentUpdate`或类似的逻辑判断是否真的需要更新画布。另外，限制气泡的数量也能有效减少计算负担。这个源码项目提供了一个学习HTML5 Canvas动画效果的好例子，通过分析和理解代码，开发者可以掌握更多关于Canvas绘图和动画制作的知识，并能将其应用到自己的项目中，创建出更复杂的交互式图形效果。

资源推荐

资源详情

资源评论

收起资源包目录

html5 canvas实现的跟随鼠标移动圆圈气泡动画特效源码.zip （1个子文件）

132689864120450789

index.html 4KB

<!doctype html> <html> <head> <meta charset="utf-8"> <title>粒子浪涌</title> <style> body { overflow: hidden; } .twitter:hover a { transform: rotate(-45deg) scale(1.05); } .twitter:hover i { color: #21c2ff; } .twitter a { bottom: -40px; right: -75px; transform: rotate(-45deg); } .twitter i { bottom: 7px; right: 7px; color: #00ACED; } .social-icon a { position: absolute; background: white; color: white; box-shadow: -1px -1px 20px 0px rgba(0, 0, 0, 0.3); display: inline-block; width: 150px; height: 80px; transform-origin: 50% 50%; transition: .15s ease-out; } .social-icon i { position: absolute; pointer-events: none; z-index: 1000; transition: .15s ease-out; } .youtube:hover a { transform: rotate(45deg) scale(1.05); } .youtube:hover i { color: #ec4c44; } .youtube a { bottom: -40px; left: -75px; transform: rotate(45deg); } .youtube i { bottom: 7px; left: 7px; color: #E62117; } </style> </head> <body> <canvas></canvas> <script> var canvas = document.querySelector("canvas"); var c = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; var mouse = { x: canvas.width / 2, y: canvas.height / 2 } window.addEventListener("resize", function() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; }); window.addEventListener("mousemove", function(e) { mouse.x = e.clientX; mouse.y = e.clientY; }); var colors = [ {r: 255, g: 71, b: 71}, {r: 0, g: 206, b: 237}, {r: 255, g: 255, b: 255} ]; function Particle(x, y, dx, dy, r, ttl) { this.x = x; this.y = y; this.dx = dx; this.dy = dy; this.r = r; this.opacity = 1; this.shouldRemove = false; this.timeToLive = ttl; this.randomColor = Math.floor(Math.random() * colors.length); this.update = function() { this.x += this.dx this.y += this.dy if (this.x + this.r >= canvas.width || this.x - this.r <= 0) this.dx = -this.dx if (this.y + this.r >= canvas.height || this.y - this.r <= 0) this.dy = -this.dy // Ensure that particles cannot be spawned past canvas boundaries this.x = Math.min(Math.max(this.x, 0 + this.r), canvas.width - this.r) this.y = Math.min(Math.max(this.y, 0 + this.r), canvas.height - this.r) c.beginPath() c.arc(this.x, this.y, this.r, 0, Math.PI * 2, false) c.strokeStyle = 'rgba(' + colors[this.randomColor].r + ',' + colors[this.randomColor].g + ',' + colors[this.randomColor].b + ',' + this.opacity + ')' c.fillStyle = 'rgba(' + colors[this.randomColor].r + ',' + colors[this.randomColor].g + ',' + colors[this.randomColor].b + ',' + this.opacity + ')' c.stroke() c.closePath() this.opacity -= 1 / (ttl / 0.1) this.r -= r / (ttl / 0.1) if (this.r < 0) this.r = 0 // Thank you Akash for the conditional! this.timeToLive -= 0.1 } this.remove = function() { // If timeToLive expires, return a true value. // This signifies that the particle should be removed from the scene. return this.timeToLive <= 0; } } function Explosion(x, y) { this.particles = []; this.init = function() { for (var i = 1; i <= 1; i++) { var randomVelocity = { x: (Math.random() - 0.5) * 3.5, y: (Math.random() - 0.5) * 3.5, } this.particles.push(new Particle(x, y, randomVelocity.x, randomVelocity.y, 30, 8)); } } this.init(); this.draw = function() { for (var i = 0; i < this.particles.length; i++) { this.particles[i].update(); if (this.particles[i].remove() == true) { this.particles.splice(i, 1); }; } } } var explosions = []; function animate() { window.requestAnimationFrame(animate); c.fillStyle = "#1e1e1e"; c.fillRect(0, 0, canvas.width, canvas.height); explosions.push(new Explosion(mouse.x, mouse.y)); for (var i = 0; i < explosions.length; i++) { explosions[i].draw(); } } animate();</script> </body> </html>

评论收藏

内容反馈

版权申诉