使用HTML5 Canvas动画：创建动态星空和触手效果

前言

HTML5 Canvas是一个强大的工具，它允许我们在网页上绘制图形和动画。在项目中，将使用Canvas创建一个动态的星空背景和一组响应鼠标移动的触手动画效果。

实现效果

请添加图片描述
在这里插入图片描述

一、HTML

首先，我们需要设置HTML结构。这包括一个canvas元素，它将作为我们的绘图表面。

<canvas id="canvas"></canvas>

二、CSS样式

接下来，我们添加一些CSS来确保canvas元素覆盖整个浏览器窗口。

body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #000;
}
canvas {
    display: block;
    background: #000;
}

JavaScript

1. 初始化Canvas

代码如下（示例）：

function initializeCanvas(elemid) {
    let canvas = document.getElementById(elemid);
    let context = canvas.getContext('2d');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    createStars(context, canvas.width, canvas.height);
    return { context: context, canvas: canvas };
}

2. 创建星空背景

使用createStars函数在Canvas上随机绘制小点，模拟星空。
代码如下（示例）：

function createStars(context, width, height) {
    const stars = 500;
    for (let i = 0; i < stars; i++) {
        const x = Math.random() * width;
        const y = Math.random() * height;
        const radius = Math.random() * 2;
        context.beginPath();
        context.arc(x, y, radius, 0, Math.PI * 2, false);
        context.fillStyle = 'white';
        context.fill();
    }
}

3. 定义触手

我们用Segment类来表示触手。

class Segment {
    constructor(parent, length, angle, isFirst) {
        this.position = isFirst ? { x: parent.x, y: parent.y } : { x: parent.nextPosition.x, y: parent.nextPosition.y };
        this.length = length;
        this.angle = angle;
        this.nextPosition = {
            x: this.position.x + length * Math.cos(this.angle),
            y: this.position.y + length * Math.sin(this.angle)
        };
    }
    // ... 其他方法
}

4. 实现触手的动态效果

class Tentacle {
    constructor(x, y, length, segments, angle) {
        this.x = x;
        this.y = y;
        this.length = length;
        this.segments = segments;
        // ... 初始化触手的每一段
    }
    updatePosition(lastTarget, target) {
        // ... 更新触手的位置
    }
    drawSegments(target) {
        // ... 绘制触手的每一段
    }
    drawBase(target) {
        // ... 绘制触手的基部
    }
}

5.实现交互功能

通过监听mousemove和mouseleave事件来添加鼠标交互功能，实现触手随着鼠标动。

canvas.addEventListener("mousemove", function(e) {
    mouse.x = e.pageX - this.offsetLeft;
    mouse.y = e.pageY - this.offsetTop;
}, false);

canvas.addEventListener("mouseleave", function(e) {
    mouse.x = false;
    mouse.y = false;
});

完整代码自取

网盘自取
https://pan.xunlei.com/s/VO739R4_yu9Yym5HjH5X7JnAA1?pwd=uifw
仅供交流学习使用。

标签