canvas实现波浪效果

最新推荐文章于 2025-02-21 22:08:57 发布

原创最新推荐文章于 2025-02-21 22:08:57 发布 · 1.5k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html5

收录于

js 专栏收录该内容

7 篇文章

订阅专栏

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)