javascript - 如何使用 HTML5 中的动态 x,y 值生成 Canvas 移动波？

Question

我有 x,y 动态数组值...

使用 x,y 值在 HTML5 画布中生成移动正弦波、三角波、方波、锯齿波......

Answer 1

未改变的正弦波很明显——Math.sin(x)，但这里是其他的......

鉴于：

p = period
o = oscillation
x = x coordinate 

求 y（y 坐标）：

// squared sine
function squareY(x) {
    return( (x%p)<o?o:0 );
}

// sawtooth sine
function sawY(x){
    return( x%p );
}

// triangular sine
function triY(x){
    return( Math.abs((x%p)-o) );
}

在样本图中：

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");

var p=30;    // period
var o=15;   // oscillation

// plot sawtooth sine wave

ctx.beginPath();
for(var x=0;x<120;x++){
    var y=sawY(x);
    ctx.lineTo(x,y);
}
ctx.stroke();


// plot squared sine wave

ctx.beginPath();
for(var x=0;x<60;x++){
    var y=squareY(x);
    y+=75; // just offsetting so drawings don't overlap
    ctx.lineTo(x,y);
}
ctx.stroke();


// plot triangular sine wave

ctx.beginPath();
for(var x=0;x<60;x++){
    var y=triY(x);
    y+=150; // just offsetting so drawings don't overlap
    ctx.lineTo(x,y);
}
ctx.stroke();

[添加示例动画]

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    ctx.lineWidth=3;

    var p=30;    // period
    var o=15;   // oscillation

    var fps = 60;
    var n=0;
    animate();
    function animate() {
        setTimeout(function() {
            requestAnimationFrame(animate);

            // Drawing code goes here
            n+=1.5;
            if(n>300){
                n=0;
            }
            ctx.clearRect(0,0,canvas.width,canvas.height);
            ctx.beginPath();
            for(var x=0;x<n;x++){
                var y=sawY(x);
                ctx.lineTo(x,y+50);
            }
            ctx.stroke();        

        }, 1000 / fps);
    }


    // sawtooth sine
    function sawY(x){
        return( x%p );
    }