HTML5Canvas实现炫酷的鼠标跟随线条闪烁电弧火花四溅动画效果源码.zip

共1个文件

html：1个

版权申诉

47 浏览量 2022-11-02 23:55:46 上传评论收藏 2KB ZIP 举报

HTML5 Canvas 是一种在网页上绘制图形的API，它允许开发者用JavaScript动态创建并操作二维图形。这个压缩包中的源码示例展示了如何利用Canvas API实现一个炫酷的鼠标跟随效果，包括线条闪烁、电弧动态和火花四溅的动画。这种效果常用于网站背景或者互动元素，可以增加用户的视觉体验。我们要理解Canvas的基本结构。HTML5 Canvas是一个基于矢量图形的画布，通过`<canvas>`标签在HTML文档中定义。在JavaScript中，我们可以通过`document.getElementById('canvas')`获取到这个画布，并使用`getContext('2d')`方法获取2D渲染上下文，这将提供一系列方法来绘制和操作图形。在这个例子中，主要涉及到以下几个关键知识点： 1. **事件监听**：为了使动画跟随鼠标移动，我们需要监听`mousemove`事件。当鼠标在画布上移动时，会触发该事件，我们可以通过`event.clientX`和`event.clientY`获取鼠标当前位置。 2. **路径绘制**：使用`beginPath()`开始一个新的路径，然后通过`moveTo()`和`lineTo()`方法设置线条的起点和终点。在每次鼠标移动时，更新这些坐标，画布就会显示出从上一次位置到当前位置的线条。 3. **描边样式**：`strokeStyle`属性用于设置线条的颜色，可以是简单的颜色字符串，如`'red'`，也可以是渐变或图案。在本例中，可能使用了某种动态颜色效果，如随机颜色或闪烁颜色。 4. **动画循环**：为了实现闪烁和火花四溅的效果，我们需要一个定时器（通常使用`requestAnimationFrame()`），每隔一定时间重复执行绘制过程。在每次迭代中，不仅绘制新的线条，还可以擦除旧的线条，产生闪烁效果。火花四溅可能通过在鼠标周围随机生成短线条来实现。 5. **阴影效果**：Canvas API提供了`shadowColor`、`shadowBlur`和`shadowOffsetX/Y`属性，可以为线条添加阴影，增强视觉深度和动态感。 6. **透明度控制**：通过`globalAlpha`属性，我们可以控制整个画布上所有形状的透明度，这在创建动态效果时非常有用，例如让线条逐渐淡出。 7. **抗锯齿处理**：使用`lineWidth`调整线条的宽度，以及`lineJoin`和`lineCap`属性设置线条连接和端点的样式，可以优化线条的视觉效果，减少锯齿。 8. **性能优化**：对于大规模动画，需要注意性能问题。可以通过只重绘必要的部分（使用`clearRect()`）和限制绘制频率（通过`requestAnimationFrame()`）来提高效率。学习和理解这个源码，可以帮助你深入掌握HTML5 Canvas API，创造出更多创新的交互式图形效果。同时，结合CSS3和其他前端技术，可以进一步提升网页的动态性和用户体验。

资源推荐

资源详情

资源评论

收起资源包目录

HTML5 Canvas 实现炫酷的鼠标跟随线条闪烁电弧火花四溅动画效果源码.zip （1个子文件）

132686863546207211

index.html 4KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Canvas 鼠标跟随的线条闪烁动画</title> <style> body { width: 100%; margin: 0; overflow: hidden; background: #000; } canvas { width: 100%; height: 100vh; } </style> </head> <body> <canvas id="canv" width="450" height="450"></canvas> <script> window.requestAnimFrame = (function() { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60); }; })(); //vars var c; //canvas var $; //context var ŭ = 0; //color update var msX = 0; //mouse x var msY = 0; //mouse y var prevX = 0; //previous x var prevY = 0; //previous y //points array var pts = new Array(); //sparks array var sparks = new Array(); go(); function go() { c = document.getElementById("canv"); $ = c.getContext("2d"); c.width = window.innerWidth; c.height = window.innerHeight; c.onmousemove = function(e) { prevX = msX; prevY = msY; msX = e.clientX; msY = e.clientY; if (pts.length > 3) { var vel = (Math.abs(prevX - msX) + Math.abs(prevY - msY)) * 0.8; var numsparks = Math.ceil(vel); if (numsparks < 5) { numsparks = 1; } for (var i = 0; i < numsparks; i++) { ŭ -= .5; if (Math.random() > 0.9) { sparks[sparks.length] = new Spark(msX, msY, (prevX - msX) * 0.2, (prevY - msY) * 0.2, vel); } } } }; anim(); } function anim() { render(); window.requestAnimFrame(anim); } function render() { $.globalCompositeOperation = "source-over"; $.fillStyle = "hsla(0,0%,0%,.2)"; $.fillRect(0, 0, c.width, c.height); $.globalCompositeOperation = "lighter"; ptSet(msX, msY); sprkSet(); } function ptSet(x, y) { if (pts.length > 30) { pts.shift(); } if (x != 0 && y != 0) { pts[pts.length] = new Pt(x, y); } if (pts.length > 10) { for (var i = 2; i < pts.length; i++) { curve(pts[i - 2], pts[i - 1], pts[i]); } } } function curve(prevPt, midPt, currPt) { $.save(); $.beginPath(); $.strokeStyle = currPt.color; $.shadowColor = "hsla(" + (ŭ % 360) + ",100%,50%,1)"; $.shadowBlur = 15; $.lineWidth = 10; $.moveTo((prevPt.x + midPt.x) * 0.5, (prevPt.y + midPt.y) * 0.5); $.quadraticCurveTo(midPt.x, midPt.y, (midPt.x + currPt.x) * 0.5, (midPt.y + currPt.y) * 0.5); $.stroke(); $.restore(); } function Pt(x, y) { this.x = x; this.y = y; this.color = "hsla(206, 95%, 95%, 1)"; } function sprkSet() { for (var i = 0; i < sparks.length; i++) { sparks[i].move(); } for (i = sparks.length - 1; i >= 0; i--) { if (sparks[i].y > c.height + 20) { sparks.splice(i, 1); } } } function Spark(x, y, velX, velY, vel) { this.x = x + (vel - Math.random() * vel * 2) * 0.5; this.y = y + (vel - Math.random() * vel * 2) * 0.5; this.vecX = (1 - Math.random() * 2 - Math.random() * velX); this.vecY = (1 - Math.random() * 3 - Math.random() * velY); } Spark.prototype.move = function() { this.vecY += 0.15; this.x += this.vecX; this.y += this.vecY; $.save(); $.fillStyle = "hsla(" + (ŭ % 360) + ",100%,50%,1)"; $.shadowColor = "hsla(" + (ŭ % 360) + ",100%,50%,.3)"; $.shadowBlur = 10; $.beginPath(); $.arc(this.x, this.y, 2.6, 0, Math.PI * 2, true); $.fill(); $.restore(); } </script> </body> </html>

评论收藏

内容反馈

版权申诉