本文共 2918 字,大约阅读时间需要 9 分钟。
你是否想在网页中实现一个与鼠标移动同步的动态星星效果?想要了解具体实现方法?下面将详细介绍如何通过 HTML5 Canvas 创建这样的效果。
通过以上代码,你可以看到页面中央固定一个跟随鼠标移动的小星星,随着鼠标的移动,星星会以一定的速率跟随其位置,并且会有一些旋转和缩放效果。你可以通过调整参数,改变星星的大小、颜色、速度和旋转方向,获得不同的视觉效果。
打开你的 IDE 或文本编辑器,新建一个名为 canvasStar.js 的文件。在文件中输入以下代码:
window.addEventListener('load', () => { var canvas = document.querySelector("#canvas"); var ctx = canvas.getContext("2d"); window.onresize = resizeCanvas; function resizeCanvas() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; } resizeCanvas(); canvas.style.cssText = ` position: fixed; z-index: 1000; pointer-events: none; `; var arr = []; var colours = ["#ffff00", "#66ffff", "#3399ff", "#99ff00", "#ff9900"]; window.addEventListener('mousemove', e => { arr.push({ x: e.clientX, y: e.clientY, r: Math.random() * 0.5 + 1.5, td: Math.random() * 4 - 2, dx: Math.random() * 2 - 1, dy: Math.random() * 1 + 1, rot: Math.random() * 90 + 90, color: colours[Math.floor(Math.random() * colours.length)] }); }); function star(x, y, r, l, rot) { ctx.beginPath(); for (let i = 0; i < 5; i++) { ctx.lineTo(Math.cos((18 + i * 72 - rot) * Math.PI / 180) * r + x, -Math.sin((18 + i * 72 - rot) * Math.PI / 180) * r + y); ctx.lineTo(Math.cos((54 + i * 72 - rot) * Math.PI / 180) * l + x, -Math.sin((54 + i * 72 - rot) * Math.PI / 180) * l + y); } ctx.closePath(); } function draw() { for (let i = 0; i < arr.length; i++) { star(arr[i].x, arr[i].y, arr[i].r, arr[i].r * 3, arr[i].rot); ctx.fillStyle = arr[i].color; ctx.strokeStyle = arr[i].color; ctx.lineWidth = 0.1; ctx.lineJoin = 'round'; ctx.fill(); ctx.stroke(); } } function update() { for (let i = 0; i < arr.length; i++) { arr[i].x += arr[i].td; arr[i].y += 0; arr[i].rot += arr[i].dy; arr[i].r -= arr[i].ds || 0.015; if (arr[i].r < 0) { arr.splice(i, 1); } } } function animation() { ctx.clearRect(0, 0, canvas.width, canvas.height); draw(); update(); requestAnimationFrame(animation); } animation();}); 在你想要显示效果的页面中,添加以下代码:
canvasStar.js 文件添加到你的页面中<body> 标签中添加 <canvas id="canvas"></canvas> 标签#ffff00、#66ffff 等:星星的颜色Math.random() * 0.5 + 1.5:星星的大小Math.random() * 4 - 2:星星的移动速度Math.random() * 90 + 90:星星的旋转角度你可以根据需要调整这些参数,获得不同的效果。
通过以上方法,你可以轻松在网页中创建跟随鼠标的小星星效果。这个方法利用 HTML5 Canvas 和 JavaScript 的动态特性,能够提供丰富的自定义选项。如果你有任何问题或需要进一步的帮助,请随时留言!
转载地址:http://rtir.baihongyu.com/