cooooommon / canvas

use javascript create very beautiful canvas demo

canvas demo

使用canvas创建一系列漂亮的可交互的图形动画

使用canvas创建随机飘动图形

• 响应式
• 指定数量形状随机分布碰撞反弹
• 颜色随机,，大小随机，速度随机

鼠标交互随机飘动图形

• 指定数量形状随机分布碰撞反弹
• 颜色随机,，大小随机，速度随机
• 鼠标划过canvas画布，靠近设置范围的图形变大，远离则变小

重力摩檫力图形交互

• 随机数量，随机大小，随机颜色的图形分布
• 加速落下，在落在地面后反弹做减速运动，直到失去速度静止
• 随机水平速度，做匀减速运动

随机飘动碰撞回弹

• 无规则随机速度在屏幕内飘动
• 相互碰撞后反弹，碰撞反弹原理有用到能量守恒定律公式
• 鼠标划过，靠近指定范围的周围球体填充透明度+，反之透明度-

流体旋转线条跟随效果

• 无规则随机颜色线条在屏幕内多层旋转
• 鼠标滑过，线条跟随鼠标移动
• 鼠标停止，寻找圆心旋转

彩色颗粒文字可交互飘动

• 无规则随机位置运动生成文字
• 鼠标滑过，颗粒飘散

H5音频可视化（koa）

• 使用koa获取文件数据，传递给前端页面
• 前端页面使用fetch获取音频文件数据
• 使用canvas绘制动态点状图和柱状图
• 面向对象、ES6