炫酷canvas旋转动画特效.rar资源-CSDN下载

共1个文件

html：1个

需积分: 1 13 浏览量 2023-11-17 16:25:54 上传评论收藏 2KB RAR 举报

在本文中，我们将深入探讨HTML5的Canvas元素及其在创建炫酷旋转动画特效中的应用。Canvas是HTML5的一个重要组成部分，它提供了一个基于矢量图形的画布，开发者可以通过JavaScript来绘制动态图形和复杂的视觉效果。 Canvas是一个二维的绘图环境，通过JavaScript API，我们可以直接在网页上进行像素级别的操作，实现丰富的交互式动画。在这个“炫酷canvas旋转动画特效”的案例中，主要涉及以下几个关键知识点： 1. **Canvas元素**：HTML5 `<canvas>` 标签用于在网页上定义一块可编程的区域，这个区域可以用来绘制图形。`<canvas>` 的宽高属性（width和height）可以设置画布的尺寸，而实际的绘图操作则通过JavaScript完成。 2. **Context对象**：Canvas API的核心是`2d`渲染上下文，它提供了大量的方法和属性，用于绘制和操作图形。例如，`fillRect()`用于填充矩形，`strokeRect()`用于描边矩形，`beginPath()`和`closePath()`用于开始和结束路径，`arc()`用于绘制圆弧，`rotate()`用于旋转坐标系等。 3. **旋转动画**：在Canvas中，`rotate()`方法用于旋转当前坐标轴，其参数是一个角度值，通常以弧度表示。要实现旋转动画，我们需要在每一帧更新时计算新的旋转角度，并调用`rotate()`。通过使用`requestAnimationFrame()`函数，我们可以创建平滑的动画效果，因为它会在浏览器下一次重绘之前调用指定的回调函数。 4. **时间戳与帧率控制**：为了实现平滑的动画，我们需要根据每帧的时间差来控制旋转速度。可以使用`Date.now()`获取当前时间戳，然后计算与上一帧的时间差，根据这个时间差来调整旋转角度，确保动画速度一致，无论用户的计算机性能如何。 5. **绘图路径**：在Canvas中，我们可以通过`beginPath()`开始一个新的路径，然后通过`moveTo()`和`lineTo()`等方法添加路径点，最后使用`fill()`或`stroke()`进行填充或描边。在旋转动画中，我们可能需要绘制旋转的对象，这可能是一个形状、一个图像或者一段文字。 6. **保存和恢复状态**：Canvas提供`save()`和`restore()`方法来保存和恢复绘图状态。在执行旋转前，可以调用`save()`保存当前的坐标系统，旋转后调用`restore()`恢复到原始状态，这样可以避免旋转影响其他未旋转的图形。 7. **事件监听与用户交互**：除了自动播放的动画，我们还可以通过监听用户的交互事件（如鼠标点击或触摸事件）来控制动画。例如，可以添加事件监听器来改变旋转速度、方向或开启/关闭动画。 8. **性能优化**：由于Canvas的绘图操作是实时的，需要注意性能优化。可以使用`clearRect()`清除指定区域，而不是整个画布，以减少不必要的重绘；另外，如果图形不发生变化，可以将其保存为图片并使用`drawImage()`来绘制，因为绘制图片比绘制路径更快。 “炫酷canvas旋转动画特效”涉及到Canvas基本操作、动画原理、用户交互等多个方面，开发者需要熟练掌握这些知识才能创建出引人入胜的互动体验。通过实践和学习，我们可以利用Canvas创造出更多创新和有趣的网页效果。

资源推荐

资源详情

资源评论

收起资源包目录

炫酷canvas旋转动画特效.rar （1个子文件）

index.html 5KB

<!doctype html> <html> <head> <meta charset="utf-8"> <title>canvas</title> <style> html { background: black; } body { width: 100%; height: 100%; position: absolute; left: 0; top: 0; overflow: hidden; margin: 0; background: black; -webkit-filter: invert(0); filter: invert(0); } #canvas { position: absolute; z-index: -1; -webkit-filter: hue-rotate(100deg) brightness(1); filter: hue-rotate(100deg) brightness(1); mix-blend-mode: difference; } #canv { position: absolute; z-index: -2; mix-blend-mode: lighter; } canvas { position: absolute; top: 50%; left: 50%; z-index: -1; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } </style> </head> <body> <canvas id='canvas'></canvas> <canvas id='canv'></canvas> <script> var c = document.getElementById('canv'), $ = c.getContext('2d'), w = c.width = window.innerWidth, h = c.height = window.innerHeight, t = 0, num = 950, s, a, b, u = 0, x, y, _x, _y, _t = 1 / 16; function random(min, max) { return Math.random() * (max - min) + min; } var anim = function() { $.globalCompositeOperation = 'multiply'; $.fillStyle = 'hsla(258,20%,50%,1)'; $.fillRect(0, 0, w, h); $.globalCompositeOperation = 'lighter'; for (var i = 0; i < .5; i++) { x = 0; _u = (u) + i * 2, col = u + (_u * 8); $.beginPath(); for (var j = 0; j < num; j++) { x -= .312 * Math.sin(15); y = x * Math.sin(i + 3.05 * t + x / 7) / 12; _x = x * Math.cos(b) + y * Math.sin(b); _y = x * Math.sin(b) - y * Math.cos(b); b = (j * 2.1102) * Math.PI / -.1008; $.arc(w / 2 - _x, h / 2 - _y, random(.001, .6), 300, Math.PI * 2 + .1); $.lineWidth = .2; } var g = $.createLinearGradient(w / 2 + _x, h / 2 + _y, 1, w / 2 + _x, h / 2 + _y); g.addColorStop(0.2, 'hsla(' + col + ',90%,50%,.2)'); g.addColorStop(0.9, 'hsla(' + _u + ',95%,50%,.3)'); g.addColorStop(1, 'hsla(0,0%,100%,.4)'); $.strokeStyle = g; $.stroke(); } t += _t / 2; u -= .2; window.requestAnimationFrame(anim); }; anim(); window.addEventListener('resize', function() { c.width = w = window.innerWidth; c.height = h = window.innerHeight; }, false); var canvas, ctx, tim; canvas = document.getElementsByTagName('canvas')[0]; ctx = canvas.getContext('2d'); canvas.width = canvas.height = 400; baum(); function baum() { var a, b, c, d, e, x, y, r; ctx.globalCompositeOperation = "source-over"; ctx.fillStyle = "hsla(26,100%,0%,1)"; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.globalCompositeOperation = "color-burn"; tim = new Date().getTime() / Math.PI / 72; c = []; r = tim / 32; for (a = 0; a < 18; a++) { b = 160; if (a % 2 == 1) b = 100; x = Math.cos(r) * b; y = Math.sin(r) * b; c.push([200 + x, 200 + y]); r += Math.PI * 2 / 14; } for (a = 0; a < 7; a++) { b = c[a * 2]; d = c[a * 2 + 1]; e = c[(a * 2 + 13) % 14]; tri([ [200, 200], b, d ], 0); tri([ [200, 200], b, e ], 0); } requestAnimationFrame(baum); } function tri(p, ban) { var a, b, c, d, e, f, x, y, han, r1, r2; x = y = 0; for (a = 0; a < 3; a++) { x += p[a][0]; y += p[a][1]; } x = x / 3 - canvas.width / 2; y = y / 3 - canvas.height / 2; han = Math.pow(x * x + y * y, 0.5); c = 0.2 + Math.sin(tim / 13) * 0.15; r1 = 0.5 + Math.sin(han / 20 * (1 + Math.sin(tim / 19) * 0.7) + tim / 41) * c; r2 = 1 - r1; c = p[0][0] * (p[1][1] - p[2][1]); c += p[1][0] * (p[2][1] - p[0][1]); c += p[2][0] * (p[0][1] - p[1][1]); c = Math.abs(c); if (c < 100) { if (ban % 17 == 1) { a = ((han + tim * 3) % 360) | 0; b = 0.4; if (ban % 12 > 8) b = 1; ctx.fillStyle = ctx.strokeStyle = "hsla(" + a * 2 + ",60%,40%,0.53)"; ctx.beginPath(); for (a = 0; a < p.length; a++) { b = p[a]; ctx.globalCompositeOperation = "lighter"; ctx.lineTo(b[0], b[1]); } ctx.fill(); if (Math.random() < 0.2) return; } if (ban % 50 > 28) return; if (c < 20) return; } d = 0; for (a = 0; a < p.length; a++) { b = p[a]; c = p[(a + 1) % p.length]; x = b[0] - c[0]; y = b[1] - c[1]; e = Math.pow(x * x + y * y, 0.5); if (e > d) { d = e; f = a; } } a = p[f]; b = p[(f + 1) % p.length]; c = p[(f + 2) % p.length]; x = a[0] * r1 + b[0] * r2; y = a[1] * r1 + b[1] * r2; tri([b, c, [x, y]], ban + 1); tri([c, a, [x, y]], ban + 2); } </script> </body> </html>

评论收藏

内容反馈