正弦波参数调节

正弦波参数调节

<div class="control">
    <label>振幅 A: <span id="a-val">1.0</span></label>
    <input type="range" id="a" min="0" max="2" step="0.1" value="1">
</div>

<div class="control">
    <label>角频率 ω: <span id="w-val">1.0</span></label>
    <input type="range" id="w" min="0.1" max="4" step="0.1" value="1">
</div>

<div class="control">
    <label>相位 φ: <span id="p-val">0.0</span></label>
    <input type="range" id="p" min="-3.14" max="3.14" step="0.1" value="0">
</div>

<canvas id="wave"></canvas>
<div class="watermark">橄榄树教育</div>

<script>
    // 动态设置Canvas分辨率
    const canvas = document.getElementById('wave');
    const ctx = canvas.getContext('2d');
    
    function resizeCanvas() {
        const devicePixelRatio = window.devicePixelRatio || 1;
        const width = canvas.clientWidth * devicePixelRatio;
        const height = canvas.clientHeight * devicePixelRatio;
        
        if (canvas.width !== width || canvas.height !== height) {
            canvas.width = width;
            canvas.height = height;
            draw(); // 分辨率变化时重绘
        }
    }
    
    // 初始绘制函数
    function draw() {
        const A = parseFloat(document.getElementById('a').value);
        const ω = parseFloat(document.getElementById('w').value);
        const φ = parseFloat(document.getElementById('p').value);
        
        // 更新显示值
        document.getElementById('a-val').textContent = A.toFixed(1);
        document.getElementById('w-val').textContent = ω.toFixed(1);
        document.getElementById('p-val').textContent = φ.toFixed(1);
        
        // 清空画布
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        // 绘制坐标轴（适配高DPI设备）
        ctx.beginPath();
        ctx.strokeStyle = '#999';
        ctx.lineWidth = 2;
        ctx.moveTo(0, canvas.height/2);
        ctx.lineTo(canvas.width, canvas.height/2);
        ctx.moveTo(canvas.width/2, 0);
        ctx.lineTo(canvas.width/2, canvas.height);
        ctx.stroke();
        
        // 绘制正弦波（使用物理像素坐标）
        ctx.beginPath();
        ctx.strokeStyle = 'blue';
        ctx.lineWidth = 3;
        
        const scale = canvas.width / 600 * 50; // 动态缩放比例
        for(let x = 0; x < canvas.width; x++) {
            const xVal = (x - canvas.width/2) / scale;
            const y = canvas.height/2 - A * scale * Math.sin(ω * xVal + φ);
            ctx.lineTo(x, y);
        }
        ctx.stroke();
    }
    
    // 添加事件监听
    document.querySelectorAll('input').forEach(slider => {
        slider.addEventListener('input', draw);
    });
    
    // 响应式处理
    window.addEventListener('resize', () => {
        resizeCanvas();
    });
    
    // 初始化
    resizeCanvas();
    draw();
</script>