Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/saber2pr/canvas
use canvas easily!
https://github.com/saber2pr/canvas
canvas typescript
Last synced: 8 days ago
JSON representation
use canvas easily!
- Host: GitHub
- URL: https://github.com/saber2pr/canvas
- Owner: Saber2pr
- Created: 2018-12-29T15:39:44.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2019-04-10T04:58:52.000Z (over 5 years ago)
- Last Synced: 2024-10-31T19:55:26.785Z (16 days ago)
- Topics: canvas, typescript
- Language: TypeScript
- Homepage:
- Size: 97.7 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# saber-canvas
[](https://www.npmjs.com/package/saber-canvas)
> use canvas easily!
```bash
npm install saber-canvas
```
# API
> 关于 Vector2D API 可以参考[saber-vector](https://github.com/Saber2pr/saber-vector)
## Rect
所有类型的基类
构造函数：
```ts
new Rect(w, h?)
```
属性：
1. type 类型标识[`请不要变更此属性`]
2. x
3. y
4. width
5. height
6. getPosition 获取坐标
7. setPosition 设置坐标
```ts
setPosition(2) // (x, y) -> (2, 2)
setPosition(2, 3) // (x, y) -> (2, 3)
```
9. getContentSize 获取大小
10. setSize 设置大小
```ts
setSize(100) // (width, height) -> (100, 100)
setSize(100, 200) // (width, height) -> (100, 200)
```
## Node
节点类型
- 继承自[Rect](https://github.com/Saber2pr/saber-canvas#Rect)
构造函数：
```ts
new Node(w, h?)
```
扩充：
1. color 颜色属性
2. setColor 设置颜色
```ts
setColor('red')
```
## Label
文字节点
- 继承自[Node](https://github.com/Saber2pr/saber-canvas#Node)
构造函数：
```ts
new Label(text, fontSize?)
```
扩充：
1. fontSize 字体大小
2. fontStyle 字体样式
3. text 文本内容
4. setFontSize 设置字体大小
5. setFontStyle 设置字体样式
6. setText 设置文本内容
## Sprite
图像节点
- 继承自[Rect](https://github.com/Saber2pr/saber-canvas#Rect)
构造函数：
```ts
new Sprite(srcUrl)
```
扩充：
1. img 图像 dom 节点
2. setSrc 设置 src 路径
# Examples
```ts
new Canvas('hello', 640, 480)
.draw(new Node(640, 480))
.draw(new Label('hello world!').setPosition(300, 20))
.draw(new Node(100, 200).setColor('blue').setPosition(200, 200))
```
