canvas's Introduction

canvas demo

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

使用canvas创建随机飘动图形

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

鼠标交互随机飘动图形

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

重力摩檫力图形交互

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

随机飘动碰撞回弹

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

流体旋转线条跟随效果

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

彩色颗粒文字可交互飘动

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

H5音频可视化（koa）

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

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.

Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

TensorFlow

An Open Source Machine Learning Framework for Everyone

Django

The Web framework for perfectionists with deadlines.

Laravel

A PHP framework for web artisans

D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

web

Some thing interesting about web. New door for the world.

server

A server is a program made to process requests and deliver data to clients.

Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

Visualization

Some thing interesting about visualization, use data art

Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.

Microsoft

Open source projects and samples from Microsoft.

Google

Google ❤️ Open Source for everyone.

Alibaba

Alibaba Open Source for everyone

D3

Data-Driven Documents codes.

Tencent

China tencent open source team.

cooooommon / canvas Goto Github PK