HTML&CSS：前端黑科技—用 Canvas 模拟量子波动

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

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

演示效果

HTML&CSS

    
    
    公众号：前端Hardy
    
        body {
            margin: 0;
            background: black;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        canvas {
            background: #111;
            margin-top: 50px;
        }
    


    
    
        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  
HTML
 

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

  CSS

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

    JavaScript 代码

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

    绘制波函数：

    使用高斯包络（Gaussian envelope）来模拟波包的形状。

    绘制波函数的实部（Re(ψ)）和概率密度（|ψ|²）。

    使用 requestAnimationFrame 函数实现动态更新，使波函数随时间变化。

    动态效果

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

    ---

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