跟随鼠标的小星星效果：使用 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 标签

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

使用说明

将 canvasStar.js 文件添加到你的页面中

在 HTML 文件的 <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/

你可能感兴趣的文章