saber-canvas

use canvas easily!

Usage no npm install needed!

<script type="module">
  import saberCanvas from 'https://cdn.skypack.dev/saber-canvas';
</script>

README

saber-canvas

npm

use canvas easily!

npm install saber-canvas

API

关于 Vector2D API 可以参考saber-vector

Rect

所有类型的基类

构造函数：

new Rect(w, h?)

属性：

  1. type 类型标识[请不要变更此属性]
  2. x
  3. y
  4. width
  5. height
  6. getPosition 获取坐标
  7. setPosition 设置坐标
setPosition(2) // (x, y) -> (2, 2)

setPosition(2, 3) // (x, y) -> (2, 3)
  1. getContentSize 获取大小
  2. setSize 设置大小
setSize(100) // (width, height) -> (100, 100)

setSize(100, 200) // (width, height) -> (100, 200)

Node

节点类型

构造函数：

new Node(w, h?)

扩充：

  1. color 颜色属性
  2. setColor 设置颜色
setColor('red')

Label

文字节点

构造函数：

new Label(text, fontSize?)

扩充：

  1. fontSize 字体大小
  2. fontStyle 字体样式
  3. text 文本内容
  4. setFontSize 设置字体大小
  5. setFontStyle 设置字体样式
  6. setText 设置文本内容

Sprite

图像节点

构造函数：

new Sprite(srcUrl)

扩充：

  1. img 图像 dom 节点
  2. setSrc 设置 src 路径

Examples

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))

loadingImage...