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

实现动态五角星生成效果

前言

在之前的文章中，有一位粉丝对我提议说想看关于代码讲解的文章。看到这个期待，我决定详细解释一下实现这个效果的方法。

实现步骤

1. 获取并准备画布

首先，我们需要获取一个HTML元素作为绘图区域。以下是获取画布并设置基础配置的代码示例：

// 获取画布
var canvas = document.querySelector("#canvas");
var ctx = canvas.getContext("2d");

2. 设置画布自适应窗口大小

为了确保画布能根据窗口大小进行调整，我们可以使用resizeCanvas函数。以下是实现代码：

// 设置画布自适应窗口大小
window.onresize = resizeCanvas;
function resizeCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
}
// 初始化调整
resizeCanvas();

3. 配置画布样式

为了使画布固定在屏幕上并阻止用户与画布交互，我们可以设置以下CSS样式：

// 配置画布样式
canvas.style.cssText = `
    position: fixed;
    z-index: 1000;
    pointer-events: none;
`;

4. 初始化星星数组

接下来，我们需要定义一个数组来存储每个星星的信息。颜色数组可以包含多个可选颜色：

// 初始化星星数组
var arr = [];
var colors = ["#ffff00", "#66ffff", "#3399ff", "#99ff00", "#ff9900"];

5. 绑定鼠标移动事件

当用户在屏幕上移动鼠标时，我们需要创建新的星星。以下是事件监听代码：

// 绑定鼠标移动事件
window.addEventListener('mousemove', function(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,    // X轴移动距离
        dy: Math.random() * 1 + 1,    // Y轴移动距离
        rot: Math.random() * 90 + 90,  // 初始旋转角度
        color: colors[Math.floor(Math.random() * colors.length)]
    });
});

6. 创建五角星绘制函数

接下来，我们需要创建一个函数来绘制五角星。以下是绘制函数的实现：

// 创建五角星绘制函数
function drawStar(x, y, r, l, rot) {
    ctx.beginPath();
    for (let i = 0; i < 5; i++) {
        // 绘制小圆上的点
        const angle = (18 + i * 72 - rot) * Math.PI / 180;
        ctx.lineTo(r * Math.cos(angle) + x, -r * Math.sin(angle) + y);
        // 绘制大圆上的点
        angle = (54 + i * 72 - rot) * Math.PI / 180;
        ctx.lineTo(l * Math.cos(angle) + x, -l * Math.sin(angle) + y);
    }
    ctx.closePath();
}

7. 实现动画效果

为了实现星星的动态效果，我们需要两个辅助函数来控制绘制和更新：

// 绘制星星
function draw() {
    for (let i = 0; i < arr.length; i++) {
        const star = arr[i];
        ctx.fillStyle = star.color;
        ctx.strokeStyle = star.color;
        ctx.lineWidth = 0.1;
        ctx.lineJoin = 'round';
        ctx.beginPath();
        drawStar(star.x, star.y, star.r, star.r * 3, star.rot);
        ctx.fill();
        ctx.stroke();
    }
}
// 更新星星位置和大小
function update() {
    for (let i = 0; i < arr.length; i++) {
        const star = arr[i];
        // 更新位置
        star.x += star.dx;
        star.y += star.dy;
        // 更新旋转角度
        star.rot += star.td;
        // 缩小半径
        star.r -= 0.015;
        // 判断是否需要移除
        if (star.r < 0) {
            arr.splice(i, 1);
        }
    }
}

8. 启动动画定时器

最后，我们需要使用setInterval函数来定时绘制和更新星星：

// 启动动画
setInterval(() => {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    draw();
    update();
}, 20);

完整代码示例

将以上代码整合在一起，完整的HTML文件可以表示为：

    
    
   
    
效果
    
   
    
通过鼠标在屏幕上移动，可以实时生成和跟踪多个五角星
    
   
    
前言
    
   
    
在之前的文章中，有一位粉丝对我提议说想看关于代码讲解的文章。
    
   
    
实现
    
   
    
    
   
    
   

代码解释

以上代码实现了一个动态生成五角星的效果。用户可以在屏幕上移动鼠标，随时添加新的五角星。每个星星都有独特的颜色和运动轨迹，具有以下特点：

这个实现利用了Canvas绘图API和JavaScript事件监听功能，能够实现自然且直观的动态效果。