本文共 2918 字，大约阅读时间需要 9 分钟。

跟随鼠标的小星星效果：使用 HTML5 Canvas 实现

你是否想在网页中实现一个与鼠标移动同步的动态星星效果？想要了解具体实现方法？下面将详细介绍如何通过 HTML5 Canvas 创建这样的效果。

实现效果

通过以上代码，你可以看到页面中央固定一个跟随鼠标移动的小星星，随着鼠标的移动，星星会以一定的速率跟随其位置，并且会有一些旋转和缩放效果。你可以通过调整参数，改变星星的大小、颜色、速度和旋转方向，获得不同的视觉效果。

文件操作

1. 创建新的 JavaScript 文件

打开你的 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();});

2. 添加必要的 HTML 标签

在你想要显示效果的页面中，添加以下代码：

使用说明

参数解释

• #ffff00、#66ffff 等：星星的颜色
• Math.random() * 0.5 + 1.5：星星的大小
• Math.random() * 4 - 2：星星的移动速度
• Math.random() * 90 + 90：星星的旋转角度

你可以根据需要调整这些参数，获得不同的效果。

总结

通过以上方法，你可以轻松在网页中创建跟随鼠标的小星星效果。这个方法利用 HTML5 Canvas 和 JavaScript 的动态特性，能够提供丰富的自定义选项。如果你有任何问题或需要进一步的帮助，请随时留言！

转载地址：http://rtir.baihongyu.com/