利用canvas制作加速球波浪效果

我在第一篇博客中提到运用canvas制作加速球效果，现在把整个代码分享给大家，希望对大家有帮助。（转载请标明出处）
先上效果图：

还存在一些问题：
1、想法是鼠标触碰到滑块才执行画波浪的效果，结果是直接碰到input标签就触发；
2、移除鼠标重新触碰后有重新绘画；
（其它问题欢迎大佬在评论区指正）

现在附上代码：

这里是html部分：

<!-- 画画区域 -->
    <div class="draw">
        <!-- 底层 -->
        <canvas id="bottomCanvas" width="400" height="200"></canvas>
        <!-- 中间层 长方形掏空中间圆形 -->
        <canvas id="middleCanvas" width="400" height="200"></canvas>
        <!-- 顶层 -->
        <canvas id="topCanvas" width="400" height="200"></canvas>
        <div class="show">
            <p id="number">0%</p>
        </div>
    </div>
    <!-- 控制区域 -->
    <div class="control">
        <input type="range" id="change" value="0" min="0" max="100">
    </div>

下面是css样式：

* {
   
            margin: 0 auto