水平和按比例调整正弦波的大小 - js

Question

我不知道水平调整正弦波大小以及在调整 window 大小时缩小比例的正确方法。它仍然需要垂直放置在同一个地方，我现在只需要水平和按比例调整大小。正弦波如图js-fiddle： https://jsfiddle.net/x2audoqk/7/

正弦波的js代码：

const canvas = document.querySelector("canvas")
const c = canvas.getContext("2d")

canvas.width = innerWidth
canvas.height = innerHeight

// Resize wave vertically
window.addEventListener("resize", () => {
    canvas.width = innerWidth
    canvas.height = innerHeight
    wave.y = canvas.height / 1.5
})

const wave = {
    y: canvas.height / 1.5,
    length: -0.0045,
    amplitude: 47.5,
    frequency: 0.0045
}

let increment = wave.frequency

const animate = () => {
    requestAnimationFrame(animate)

    // Deletes previous waves
    c.clearRect(0, 0, canvas.width, canvas.height)

    c.beginPath()

    // Get all the points on the line so you can modify it with sin
    for (let i = 0; i <= canvas.width; i++) {
        c.moveTo(i, wave.y + Math.sin(i * wave.length + increment) * wave.amplitude * Math.sin(increment))
        c.lineTo(i, canvas.height)
    }

    // Style
    c.strokeStyle = 'rgba(1, 88, 206, .25)'
    c.stroke()
    increment += wave.frequency
    c.closePath()
}
animate()

我该如何实现？如果您需要更多信息或说明，请随时询问。

Answer 1

不知道是不是你想要的，

但是通过添加这条线，波浪的长度适合canvas

的宽度

window.addEventListener("resize", function () {
    canvas.width = innerWidth
    canvas.height = innerHeight
    wave.y = canvas.height / 1.5
    wave.length = -2/canvas.width // <---- add this line
})

https://jsfiddle.net/gui3_/mwzun5dr/1/

编辑

为了让它干净，还应该更改以下内容，以便在调整大小之前计算相同的波浪长度


const wave = {
    y: canvas.height / 1.5,
    length: -2/canvas.width, //-0.0045,
    amplitude: 47.5,
    frequency: 0.0045
}

水平和按比例调整正弦波的大小 - js

Resize sine wave horizontally and proportionally - js

javascript

canvas

html5-canvas

sine-wave

编辑