使用javascript和CSS在曲线上显示sin和cos动画

使用JavaScript和CSS在曲线上显示sin和cos动画可以通过以下步骤实现：

创建HTML文件，并在文件中引入JavaScript和CSS文件。

<!DOCTYPE html>
<html>
<head>
    <title>Sin and Cos Animation</title>
    <style>
        canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="800" height="400"></canvas>
    <script src="script.js"></script>
</body>
</html>

在JavaScript文件（script.js）中编写代码来绘制sin和cos动画。

// 获取canvas元素
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

// 设置动画参数
var amplitude = 100; // 振幅
var frequency = 0.02; // 频率
var phaseShift = 0; // 相位偏移
var xOffset = 0; // x轴偏移

// 绘制sin和cos动画
function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    ctx.beginPath();
    ctx.moveTo(0, canvas.height / 2);

    for (var x = 0; x < canvas.width; x++) {
        var ySin = amplitude * Math.sin(frequency * x + phaseShift);
        var yCos = amplitude * Math.cos(frequency * x + phaseShift);

        ctx.lineTo(x + xOffset, canvas.height / 2 - ySin);
        ctx.lineTo(x + xOffset, canvas.height / 2 - yCos);
    }

    ctx.strokeStyle = "red";
    ctx.stroke();

    xOffset += 1; // 控制动画速度

    requestAnimationFrame(draw);
}

draw();