用AI大模型写一个动态演示正弦函数图像的课件

这里我们使用豆包AI，写出我们的要求：
生成一个html页面，页面中央放一个canvas画布，第一层绘制一个坐标系，x坐标刻度为-1.0pi，-0.5pi，0，0.5pi，1.0pi，y坐标刻度是-1，0，1，第二层绘制一个正弦函数曲线图：a*sin(x)+b，canvas上面放4个按钮，一个文字是a+，一个文字是a-，一个文字是b+，一个文字是b-，写一个javascript函数，点击a+，则a的值增加0.1pi,点击a-，则a的值减少0.1pi,点击b+，则b的值增加0.1pi,点击b-，则b的值减少0.1pi，写出完整的html和内置的javascrit代码

豆包回答如下：

我们复制这段代码，然后新建一个记事本文件，把豆包AI生成的代码复制进去，并保存为sinx.html。

然后我们双击这个html文件，就能在浏览器中看到这个课件的界面了。

然后我们点击a-按钮，看看效果。波形幅度明显变化了。

再点击b+按钮，看看效果，波形整体上移了。

下面是完整的html代码。

    
    
    
    



    

        a+
        a-
        b+
        b-
    
    
    <script>
        // 获取 canvas 元素和绘图上下文
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');

        // 初始化参数 a 和 b
        let a = 1;
        let b = 0;

        // 定义绘制坐标系的函数
        function drawAxes() {
            const width = canvas.width;
            const height = canvas.height;
            const centerX = width / 2;
            const centerY = height / 2;

            // 绘制 x 轴
            ctx.beginPath();
            ctx.moveTo(0, centerY);
            ctx.lineTo(width, centerY);
            ctx.strokeStyle = 'black';
            ctx.stroke();

            // 绘制 y 轴
            ctx.beginPath();
            ctx.moveTo(centerX, 0);
            ctx.lineTo(centerX, height);
            ctx.stroke();

            // 绘制 x 轴刻度
            const xLabels = ['-1.0π', '-0.5π', '0', '0.5π', '1.0π'];
            const xValues = [-Math.PI, -0.5 * Math.PI, 0, 0.5 * Math.PI, Math.PI];
            for (let i = 0; i < xLabels.length; i++) {
                const x = centerX + (xValues[i] / Math.PI) * (width / 2);
                ctx.fillText(xLabels[i], x - 10, centerY + 20);
                ctx.beginPath();
                ctx.moveTo(x, centerY - 5);
                ctx.lineTo(x, centerY + 5);
                ctx.stroke();
            }

            // 绘制 y 轴刻度
            const yLabels = ['-1', '0', '1'];
            const yValues = [-1, 0, 1];
            for (let i = 0; i < yLabels.length; i++) {
                const y = centerY - yValues[i] * (height / 2);
                ctx.fillText(yLabels[i], centerX - 20, y + 5);
                ctx.beginPath();
                ctx.moveTo(centerX - 5, y);
                ctx.lineTo(centerX + 5, y);
                ctx.stroke();
            }
        }

        // 定义绘制正弦函数曲线的函数
        function drawSineWave() {
            const width = canvas.width;
            const height = canvas.height;
            const centerX = width / 2;
            const centerY = height / 2;

            ctx.beginPath();
            for (let x = -Math.PI; x <= Math.PI; x += 0.01) {
                const y = a * Math.sin(x) + b;
                const pixelX = centerX + (x / Math.PI) * (width / 2);
                const pixelY = centerY - y * (height / 2);
                if (x === -Math.PI) {
                    ctx.moveTo(pixelX, pixelY);
                } else {
                    ctx.lineTo(pixelX, pixelY);
                }
            }
            ctx.strokeStyle = 'blue';
            ctx.stroke();
        }

        // 定义更新画布的函数
        function updateCanvas() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            drawAxes();
            drawSineWave();
        }

        // 绑定按钮点击事件
        document.getElementById('a-plus').addEventListener('click', function () {
            a += 0.1 * Math.PI;
            updateCanvas();
        });

        document.getElementById('a-minus').addEventListener('click', function () {
            a -= 0.1 * Math.PI;
            updateCanvas();
        });

        document.getElementById('b-plus').addEventListener('click', function () {
            b += 0.1 * Math.PI;
            updateCanvas();
        });

        document.getElementById('b-minus').addEventListener('click', function () {
            b -= 0.1 * Math.PI;
            updateCanvas();
        });

        // 初始化画布
        updateCanvas();
    </script>