# canvas-special

**Repository Path**: sundayisblue/canvas-special

## Basic Information

- **Project Name**: canvas-special
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2021-07-20
- **Last Updated**: 2024-12-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


## 超多经典 canvas 实例

**普及**：`<canvas>` 元素用于在网页上绘制图形。这是一个图形容器，您可以控制其每一像素，必须使用脚本来绘制图形。

**注意**：IE 8 以及更早的版本不支持 `<canvas>` 元素。

**贴士**：全部例子都分享在我的 GayHub - https://github.com/bxm0927/canvas-special

<p align="center">
  <a href="https://juejin.im/entry/59901e12f265da3e207709b0/detail"><img src="https://badge.juejin.im/entry/59901e12f265da3e207709b0/likes.svg?style=plastic"></a>
</p>

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

[GitHub源码](https://github.com/bxm0927/canvas-special) 、 [Demo演示](https://bxm0927.github.io/canvas-special/evan-you/index.html)

<div  align="center">
  <img src="http://oph264zoo.bkt.clouddn.com/17-8-13/13451038.jpg">
</div>

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

[GitHub源码](https://github.com/bxm0927/canvas-special) 、 [Demo演示](https://bxm0927.github.io/canvas-special/zhihu/index.html)

<div  align="center">
  <img src="http://oph264zoo.bkt.clouddn.com/17-8-13/46746967.jpg">
</div>

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

[GitHub源码](https://github.com/bxm0927/canvas-special) 、 [Demo演示](https://bxm0927.github.io/canvas-special/five-chess/index.html)

<div  align="center">
  <img src="http://oph264zoo.bkt.clouddn.com/17-8-13/73389448.jpg">
</div>

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

[GitHub源码](https://github.com/bxm0927/canvas-special) 、 [Demo演示](https://bxm0927.github.io/canvas-special/man-down100/index.html)

<div  align="center">
  <img src="http://oph264zoo.bkt.clouddn.com/17-8-13/7179685.jpg">
</div>

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

[GitHub源码](https://github.com/bxm0927/canvas-special) 、 [Demo演示](https://bxm0927.github.io/canvas-special/brush/index.html)

<div  align="center">
  <img src="http://oph264zoo.bkt.clouddn.com/17-8-13/46818247.jpg">
</div>

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

[GitHub源码](https://github.com/bxm0927/canvas-special) 、 [Demo演示](https://bxm0927.github.io/canvas-special/side-text/index.html)

<div  align="center">
  <img src="http://oph264zoo.bkt.clouddn.com/17-8-13/63436276.jpg">
</div>

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

[GitHub源码](https://github.com/bxm0927/canvas-special) 、 [Demo演示](https://bxm0927.github.io/canvas-special/globule/index.html)

<div  align="center">
  <img src="http://oph264zoo.bkt.clouddn.com/17-8-13/75085934.jpg">
</div>


### 8. 2048

[GitHub源码](https://github.com/bxm0927/canvas-special) 、 [Demo演示](https://bxm0927.github.io/canvas-special/game2048/index.html)

<div  align="center">
  <img src="http://oph264zoo.bkt.clouddn.com/17-8-13/62175805.jpg">
</div>

### 9. 贪吃蛇

[GitHub源码](https://github.com/bxm0927/canvas-special) 、 [Demo演示](https://bxm0927.github.io/canvas-special/snake/index.html)

<div  align="center">
  <img src="http://oph264zoo.bkt.clouddn.com/17-8-13/97986004.jpg">
</div>

### 10. 看你有多色

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

<div  align="center">
  <img src="http://oph264zoo.bkt.clouddn.com/17-8-13/52916235.jpg">
</div>

### 11. 坦克大战

[GitHub源码](https://github.com/bxm0927/canvas-special) 、 [Demo演示](https://bxm0927.github.io/canvas-special/tank/index.html)

<div  align="center">
  <img src="http://oph264zoo.bkt.clouddn.com/17-8-13/61788877.jpg">
</div>

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

[GitHub源码](https://github.com/bxm0927/canvas-special) 、 [Demo演示](https://bxm0927.github.io/canvas-special/universe/index.html)

<div  align="center">
  <img src="http://oph264zoo.bkt.clouddn.com/17-8-13/42596452.jpg">
</div>

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

[GitHub源码](https://github.com/bxm0927/canvas-special) 、 [Demo演示](https://bxm0927.github.io/canvas-special/alipay/index.html)

<div  align="center">
  <img src="http://oph264zoo.bkt.clouddn.com/17-8-13/89320322.jpg">
</div>

### 14. 程序员表白代码

[GitHub源码](https://github.com/bxm0927/canvas-special) 、 [Demo演示](https://bxm0927.github.io/canvas-special/love-time/index.html)

<div  align="center">
  <img src="http://oph264zoo.bkt.clouddn.com/17-8-13/58827874.jpg">
</div>

### 15. 心形文字

[GitHub源码](https://github.com/bxm0927/canvas-special) 、 [Demo演示](https://bxm0927.github.io/canvas-special/heart/index.html)

<div  align="center">
  <img src="http://oph264zoo.bkt.clouddn.com/17-8-13/10558210.jpg">
</div>

### 16. 照片墙

[GitHub源码](https://github.com/bxm0927/canvas-special) 、 [Demo演示](https://bxm0927.github.io/canvas-special/photo-wall/index.html)

<div  align="center">
  <img src="http://oph264zoo.bkt.clouddn.com/17-8-13/44601791.jpg">
</div>


## License

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

<marquee>不断更新，欢迎补充！</marquee>

![](http://oph264zoo.bkt.clouddn.com/17-8-11/10545126.jpg)