Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/bxm0927/canvas-special

:octocat::alien::star2:超多经典 Canvas 实例,动态离子背景、炫彩小球、贪吃蛇、坦克大战、是男人就下100层、心形文字等。
https://github.com/bxm0927/canvas-special

canvas css html js

Last synced: 18 days ago
JSON representation

:octocat::alien::star2:超多经典 Canvas 实例,动态离子背景、炫彩小球、贪吃蛇、坦克大战、是男人就下100层、心形文字等。

Lists

README

        

# 超多经典 canvas 实例

**普及**:`` 元素用于在网页上绘制图形。这是一个 HTML 图形容器,必须使用脚本来绘制图形。

**注意**:IE 8 以及更早的版本不支持 `` 元素。

## 1. 尤雨溪个人主页炫彩三角纽带效果,点击可变换

[ [源码](https://github.com/bxm0927/canvas-special/blob/master/evan-you) | [演示](https://bxm0927.github.io/canvas-special/evan-you/index.html) ]

![](./assets/evan-you.png)

## 2. 知乎登录注册页动态离子背景效果

[ [源码](https://github.com/bxm0927/canvas-special/blob/master/zhihu) | [演示](https://bxm0927.github.io/canvas-special/zhihu/index.html) ]

![](./assets/zhihu.png)

## 3. 基于 canvas 的五子棋完整功能实现

[ [源码](https://github.com/bxm0927/canvas-special/blob/master/five-chess) | [演示](https://bxm0927.github.io/canvas-special/five-chess/index.html) ]

![](./assets/five-chess.png)

## 4. 基于 canvas 的《是男人就下100层》小游戏完美实现

[ [源码](https://github.com/bxm0927/canvas-special/blob/master/man-down100) | [演示](https://bxm0927.github.io/canvas-special/man-down100/index.html) ]

![](./assets/man-down100.png)

## 5. 毛笔字书写田字格,可以写字

[ [源码](https://github.com/bxm0927/canvas-special/blob/master/brush) | [演示](https://bxm0927.github.io/canvas-special/brush/index.html) ]

![](./assets/brush.png)

## 6. 随心而动,随刃而行。输入文字显示动画粒子特效

[ [源码](https://github.com/bxm0927/canvas-special/blob/master/side-text) | [演示](https://bxm0927.github.io/canvas-special/side-text/index.html) ]

![](./assets/side-text.png)

## 7. 鼠标移动炫彩小球

[ [源码](https://github.com/bxm0927/canvas-special/blob/master/globule) | [演示](https://bxm0927.github.io/canvas-special/globule/index.html) ]

![](./assets/globule.png)

## 8. 2048

[ [源码](https://github.com/bxm0927/canvas-special/blob/master/game2048) | [演示](https://bxm0927.github.io/canvas-special/game2048/index.html) ]

![](./assets/game2048.png)

## 9. 贪吃蛇

[ [源码](https://github.com/bxm0927/canvas-special/blob/master/snake) | [演示](https://bxm0927.github.io/canvas-special/snake/index.html) ]

![](./assets/snake.png)

## 10. 看你有多色

[ [源码](https://github.com/bxm0927/canvas-special/blob/master/look-def-color) | [演示](https://bxm0927.github.io/canvas-special/look-def-color/index.html) ]

![](./assets/look-def-color.png)

## 11. 坦克大战

[ [源码](https://github.com/bxm0927/canvas-special/blob/master/tank) | [演示](https://bxm0927.github.io/canvas-special/tank/index.html) ]

![](./assets/tank.png)

## 12. 宇宙行星旋转特效

[ [源码](https://github.com/bxm0927/canvas-special/blob/master/universe) | [演示](https://bxm0927.github.io/canvas-special/universe/index.html) ]

![](./assets/universe.png)

## 13. 支付宝咻咻咻动画特效

[ [源码](https://github.com/bxm0927/canvas-special/blob/master/alipay) | [演示](https://bxm0927.github.io/canvas-special/alipay/index.html) ]

![](./assets/alipay.png)

## 14. 程序员表白代码

[ [源码](https://github.com/bxm0927/canvas-special/blob/master/love-time) | [演示](https://bxm0927.github.io/canvas-special/love-time/index.html) ]

![](./assets/love-time.png)

## 15. 心形文字

[ [源码](https://github.com/bxm0927/canvas-special/blob/master/heart) | [演示](https://bxm0927.github.io/canvas-special/heart/index.html) ]

![](./assets/heart.png)

## 16. 照片墙

[ [源码](https://github.com/bxm0927/canvas-special/blob/master/photo-wall) | [演示](https://bxm0927.github.io/canvas-special/photo-wall/index.html) ]

![](./assets/photo-wall.png)

## License

The code is available under the [MIT license](https://opensource.org/licenses/MIT).

部分收集于网络,侵删。