canvas实现不规则波浪

最新推荐文章于 2024-07-07 02:17:51 发布

wxk_前端开发

最新推荐文章于 2024-07-07 02:17:51 发布

阅读量1.1k

点赞数 2

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/m0_37058714/article/details/90447336

这篇博客介绍了如何使用HTML5的Canvas元素来实现不规则的波浪效果，适用于PC和H5场景。主要内容集中在JavaScript代码部分，展示了创建和操作Canvas进行图形绘制的技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.html中用canvas标签

 <canvas id="canvas" width="1920" height="200"></canvas>

宽高根据自己需要自己定义适用于PC和H5

2.js部分

 <script>
        var canvas = document.getElementById('canvas');
        var options = {
            id: "canvas",
            x: 20,
            y: 60,
            level: .5,
            min: 70,
            max: 90,
            count: 10,
            strokeColor: '#ffbbb2',
            fillStyle: '#ffbbb2'
        }

        wave(options);
        function wave(options) {
            var c = document.getElementById(options.id),
                ctx = c.getContext('2d'),
                cw = c.width,
                ch = c.height,
                points = [],
                tick = 0,
                opt = {
                    count: options.count || 8,