HTML&CSS：前端黑科技—用 Canvas 模拟量子波动这个 HTML 文件是一个简单的前端代码示例，用于在网页上绘

这个 HTML 文件是一个简单的前端代码示例，用于在网页上绘制动态的波函数图像。它利用 HTML5 的 canvas 元素和 JavaScript 来实现动态效果。

大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信回复源码两字，我会发送完整的压缩包给你。

演示效果

HTML&CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公众号：前端Hardy</title>
    <style>
        body {
            margin: 0;
            background: black;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        canvas {
            background: #111;
            margin-top: 50px;
        }
    </style>
</head>

<body>
    <canvas id="wave" width="1000" height="625"></canvas>
    <script>
        const canvas = document.getElementById("wave");
        const ctx = canvas.getContext("2d");

        const width = canvas.width;
        const height = canvas.height;
        const N = 500;
        const dx = 1;
        let t = 0;

        function draw() {
            ctx.clearRect(0, 0, width, height);
            ctx.lineWidth = 2;

            ctx.beginPath();
            ctx.strokeStyle = "cyan";

            for (let i = 0; i < N; i++) {
                let x = (i - N / 2) * dx;
                let sigma = 30;
                let k0 = 0.2;

                // Gaussian envelope
                let envelope = Math.exp(-x * x / (2 * sigma * sigma));

                // Time-evolving wave: Re(ψ) = envelope * cos(kx - ωt)
                let real = envelope * Math.cos(k0 * x - 0.02 * t);

                let px = i * (width / N);
                let py = height / 2 - real * 100;

                if (i === 0) ctx.moveTo(px, py);
                else ctx.lineTo(px, py);
            }

            ctx.stroke();

            // Optional: probability density (|ψ|²)
            ctx.beginPath();
            ctx.strokeStyle = "yellow";
            for (let i = 0; i < N; i++) {
                let x = (i - N / 2) * dx;
                let sigma = 30;
                let k0 = 0.2;
                let envelope = Math.exp(-x * x / (2 * sigma * sigma));
                let prob = envelope * envelope;

                let px = i * (width / N);
                let py = height / 2 - prob * 300;

                if (i === 0) ctx.moveTo(px, py);
                else ctx.lineTo(px, py);
            }
            ctx.stroke();

            t += 1;
            requestAnimationFrame(draw);
        }

        draw();
    </script>
</body>

</html>

HTML

canvas 元素：用于绘制图形。这里设置了一个宽度为 1000 像素、高度为 625 像素的画布。
script 标签：包含 JavaScript 代码，用于绘制动态波函数。

CSS

设置了页面的背景为黑色，文字颜色为白色。
将页面内容居中显示，并设置画布的背景颜色为深灰色。

JavaScript 代码

初始化画布：获取 canvas 元素的上下文，并设置画布的宽度和高度。

绘制波函数：使用高斯包络（Gaussian envelope）来模拟波包的形状。

绘制波函数的实部（Re(ψ)）和概率密度（|ψ|²）。使用 requestAnimationFrame 函数实现动态更新，使波函数随时间变化。

动态效果

波函数的实部和概率密度随时间动态变化，通过调整参数（如波数 k0 和时间 t）可以观察到波的传播和干涉现象。

各位互联网搭子，要是这篇文章成功引起了你的注意，别犹豫，关注、点赞、评论、分享走一波，让我们把这份默契延续下去，一起在知识的海洋里乘风破浪！