canvas實現波浪效果

html部分

    <canvas id="can" width="500px" height="400px"></canvas>

js部分

	var canvas = document.getElementById("can");
    var ctx = canvas.getContext("2d");
    var width = 500;
    var height = 400;
    var offset = 0;
    var num = 0;
    var timer = setInterval(function () {
        //波浪效果
        ctx.clearRect(0, 0, 500, 400);
        ctx.beginPath();

        ctx.moveTo(0 + offset - width, height / 2); //寬高
        ctx.quadraticCurveTo(width / 4 + offset - width, height / 2 - Math.sin(num)*120, width / 2 + offset - width, height /
            2);
        ctx.quadraticCurveTo((3 / 4) * width + offset - width, height / 2 + Math.sin(num)*120, width + offset - width,
            height / 2);
        ctx.stroke();

        ctx.moveTo(0 + offset, height / 2); //寬高
        ctx.quadraticCurveTo(width / 4 + offset, height / 2 - Math.sin(num)*120, width / 2 + offset, height / 2);
        ctx.quadraticCurveTo((3 / 4) * width + offset, height / 2 + Math.sin(num)*120, width + offset, height / 2);
        ctx.stroke();

        offset += 4;
        offset %=500;//迴圈波浪
        num += 0.02;
    }, 1000 / 30)