canvas气泡：雨滴落地效果

最新推荐文章于 2024-07-26 19:04:42 发布

大阿冬

最新推荐文章于 2024-07-26 19:04:42 发布

阅读量602

点赞数

本文链接：https://blog.csdn.net/xswlXAD/article/details/95016719

版权

该博客展示了如何使用HTML5 Canvas元素创建一个动态的雨滴落地效果。通过JS定义的画布绘制技术，实现了一种逼真的水滴在地面上溅起的视觉体验。

摘要由CSDN通过智能技术生成

demo效果预览

HTML结构

<body>
    <canvas id="canvas" width="1000" height="800"></canvas>
</body>

JS定义画布绘制

    <script>
        (()=>{
            document.addEventListener('DOMContentLoaded',function(){
                //业务
                let canvas = document.querySelector('#canvas');
                let ctx = canvas.getContext('2d');
                let circles = [];
                
                // 生成速度需要小于绘制速度
                
                /*生成*/
                setInterval(function () {
                    generateCircle();
                },45);