English | [简体中文](./README.CN.md)
# Cax [![](https://img.shields.io/npm/v/cax.svg)](https://www.npmjs.com/package/cax)
> Canvas 2D Rendering Engine
## Features
* Simple API, Lightweight and High performance
* Support PC and Mobile Canvas 2D Rendering and Mouse and Touch Event
* Support event of element and element management like DOM
* Turing complete group nesting system
* Support clip and clip transformation
* Built-in Text, Bitmap, Sprite, Graphics and Shape
* Support [SVG Path](https://github.com/dntzhang/cax/blob/master/packages/cax/src/render/display/shape/path.js) rendering
* Support [CSS filter](https://github.com/dntzhang/cax/tree/master/packages/cax/src/render/filter)
* Built-in images loader
* Built-in cross platform motion library [→ to2to](https://github.com/dntzhang/cax/tree/master/packages/to)
## Demo
* [Wechart by Cax![](./asset/hot.png)](https://github.com/dntzhang/wechart)
* [Simple](https://dntzhang.github.io/cax)
* [Animation](https://dntzhang.github.io/cax/packages/cax/examples/to/)
* [Clip](https://dntzhang.github.io/cax/packages/cax/examples/clip/)
* [Clip Transform](https://dntzhang.github.io/cax/packages/cax/examples/clip-transform/)
* [Clip Transition](https://dntzhang.github.io/cax/packages/cax/examples/clip-transition/)
* [To2To Animate](https://dntzhang.github.io/cax/packages/cax/examples/to-animate/)
* [Swing](https://dntzhang.github.io/cax/packages/to/examples/swing/)
* [Cax + Matter](https://dntzhang.github.io/cax/packages/cax/examples/matter/)
* [Pie Chart](https://dntzhang.github.io/wechart/packages/pie/examples/simple/)
* [To + Shape](https://dntzhang.github.io/cax/packages/cax/examples/to-shape/)
* [Vision](https://dntzhang.github.io/cax/packages/cax/examples/vision/)
* [Cache](https://dntzhang.github.io/cax/packages/cax/examples/cache/)
* [Filter](https://dntzhang.github.io/cax/packages/cax/examples/filter/)
* [SVG](https://dntzhang.github.io/wechart/packages/path/examples/man/)
* [Graphics](https://dntzhang.github.io/cax/packages/cax/examples/graphics/)
* [Composite Operation](http://dntzhang.github.io/cax/packages/cax/examples/composite-operation/)
* [Cax + Dragonbones](https://dntzhang.github.io/wechart/packages/cax-dragonbones/examples/simple/index.html)
[→ Demo Source Code](https://github.com/dntzhang/cax/tree/master/packages/cax/examples)
## Docs
- [Getting Started](#getting-started)
- [Built-in Object](#built-in-object)
- [Group](#group)
- [Method](#group-method)
- [add](#add)
- [remove](#remove)
- [empty](#empty)
- [replace](#replace)
- [Stage](#stage)
- [Method](#stage-method)
- [update](#update)
- [scaleEventPoint](#scaleeventpoint)
- [Prop](#stage-prop)
- [disableMoveDetection](#disablemovedetection)
- [moveDetectionInterval](#movedetectioninterval)
- [Bitmap](#bitmap)
- [Prop](#bitmap-prop)
- [rect](#rect)
- [Sprite](#sprite)
- [Method](#sprite-method)
- [gotoAndPlay](#gotoandplay)
- [gotoAndStop](#gotoandstop)
- [gotoAndPlayOnce](#gotoandplayonce)
- [Text](#text)
- [Method](#text-method)
- [getWidth](#getwidth)
- [Graphics](#graphics)
- [Shape](#shape)
- [Rect](#rect-1)
- [Circle](#circle)
- [Ellipse](#ellipse)
- [Element](#element)
- [Button](#button)
- [Property](#property)
- [Transform](#transform)
- [Alpha](#alpha)
- [CompositeOperation](#compositeoperation)
- [Cursor](#cursor)
- [Fixed](#fixed)
- [Shadow](#shadow)
- [Stage](#stage-1)
- [Method](#method)
- [destroy](#destroy)
- [Event](#event)
- [Motion](#motion)
- [Clip](#clip)
- [Custom Object](#custom-object)
- [Custom Shape](#custom-shape)
- [Custom Element](#custom-element)
- [Who is using cax?](#who-is-using-cax)
- [License](#license)
## Getting Started
Get cax through npm or cdn:
``` bash
npm i cax
```
* [https://unpkg.com/cax@latest/dist/cax.min.js](https://unpkg.com/cax@latest/dist/cax.min.js)
* [https://unpkg.com/cax@latest/dist/cax.js](https://unpkg.com/cax@latest/dist/cax.js)
Usage:
``` js
import cax from 'cax'
const stage = new cax.Stage(200, 200, 'body')
cax.loadImgs({
imgs: ['./test.jpg'],
complete: (imgs) => {
const img = imgs[0]
const bitmap = new cax.Bitmap(img)
bitmap.x = stage.width / 2
bitmap.y = stage.height / 2
bitmap.rotation = -10
bitmap.originX = img.width / 2
bitmap.originY = img.height / 2
bitmap.filter('blur(10px)')
stage.add(bitmap)
stage.update()
}
})
```
## Built-in Object
### Group
For grouping, group can also nested group, and the parent container's properties will be superimposed on child properties, such as:
* the x of group is 100, the x of bitmap in group is 200, and the x of the bitmap rendered to stage is 300.
* the alpha of group is 0.7, the alpha of bitmap in group is 0.6, and the alpha of the bitmap rendered to stage is 0.42.
```js
const group = new cax.Group()
const rect = new cax.Rect(100, 100, {
fillStyle: 'black'
})
group.add(rect)
stage.add(group)
stage.update()
```
Group has commonly used `add` and `remove` methods to add and delete elements. The first add will be drawn first, and all subsequent add will be covered above the top add.
#### Group Method
##### add
add child to group
``` js
groupObj.add(child)
```
##### remove
remove child from group
``` js
groupObj.remove(child)
```
##### empty
remove all the children from group
``` js
groupObj.empty()
```
##### replace
replace child by another obj
```js
groupObj.replace(current, prev)
```
### Stage
Stage is the largest top container inherited from Group, so have all the methods and props of Group.
#### Stage Method
##### update
Any element can't be seen on the stage. You must execute the update method.
```js
stage.update()
```
Any element property is modified. Please perform stage.update() to update the stage, or put it in the timer.
```js
cax.tick(stage.update.bind(stage))
```
##### scaleEventPoint
When the height of the canvas and the pixels of the canvas are not one-to-one, the event triggering position is inaccurate, and you can use the scaleEventPoint method to make the event correct.
```js
//The width of the canvas is half the canvas pixel
stage.scaleEventPoint(0.5, 0.5)
```
Example: https://github.com/dntzhang/cax/blob/master/packages/cax/examples/pie/main.js#L218-L220
#### Stage Prop
##### disableMoveDetection
Disable event detection for mouse or touch mobile. Default value in the web is false. You can change it:
```js
stage.disableMoveDetection = true
```
##### moveDetectionInterval
Set the touchmove and mousemove detection interval by moveDetectionInterval.
```js
//check twice in one second
stage.moveDetectionInterval = 500
```
### Bitmap
```js
const bitmap = new cax.Bitmap(img)
stage.add(bitmap)
stage.update()
```
If you only transmit URL instead of the instance of the Image object, you need to do this:
```js
const bitmap = new cax.Bitmap('./wepay.png', ()=>{
stage.update()
})
stage.add(bitmap)
```
#### bitmap-prop
##### rect
You can set the picture clipping display area, and other transform attributes:
```js
bitmap.rect = [0, 0, 170, 140]
bitmap.x = 200
bitmap.rotation = 30
```
### Sprite
The sequence frame animation component can combine any region of any picture into a series of animations.
```js
const sprite = new cax.Sprite({
framerate: 7,
imgs: ['./mario-sheet.png'],
frames: [
// x, y, width, height, originX, originY ,imageIndex
[0, 0, 32, 32],
[32 * 1, 0, 32, 32],
[32 * 2, 0, 32, 32],
[32 * 3, 0, 32, 32],
[32 * 4, 0, 32, 32],
[32 * 5, 0, 32, 32],
[32 * 6, 0, 32, 32],
[32 * 7, 0, 32, 32],
[32 * 8, 0, 32, 32],
[32 * 9, 0, 32, 32],
[32 * 10, 0, 32, 32],
[32 * 11, 0, 32, 32],
[32 * 12, 0, 32, 32],
[32 * 13, 0, 32, 32],
[32 * 14, 0, 32, 32]
],
没有合适的资源?快使用搜索试试~ 我知道了~
Canvas渲染引擎,支持SVG,兼容了小程序、小游戏和Web.zip
共241个文件
js:115个
png:56个
html:25个
需积分: 5 0 下载量 145 浏览量
2023-09-30
16:35:15
上传
评论
收藏 3.46MB ZIP 举报
温馨提示
Canvas渲染引擎,支持SVG,兼容了小程序、小游戏和Web
资源推荐
资源详情
资源评论
收起资源包目录
Canvas渲染引擎,支持SVG,兼容了小程序、小游戏和Web.zip (241个子文件)
.babelrc 62B
.eslintignore 351B
.eslintrc 171B
.gitignore 101B
index.html 5KB
index.html 3KB
index.html 2KB
index.html 1KB
index.html 1KB
index.html 953B
index.html 917B
index.html 912B
index.html 912B
index.html 894B
index.html 894B
index.html 873B
index.html 867B
index.html 849B
index.html 843B
index.html 843B
index.html 744B
index.html 737B
index.html 737B
index.html 737B
index.html 737B
index.html 737B
index.html 737B
index.html 622B
index.html 228B
wegame.jpg 75KB
bg.jpg 44KB
demo.jpg 19KB
demo.jpg 19KB
box.jpg 6KB
wepay-diy.jpg 6KB
wepay-diy.jpg 6KB
wepay-diy.jpg 6KB
wepay-diy.jpg 6KB
wepay-diy.jpg 6KB
wepay-diy.jpg 6KB
wepay-diy.jpg 6KB
wepay-diy.jpg 6KB
wepay-diy.jpg 6KB
wepay-diy.jpg 6KB
wepay-diy.jpg 6KB
matter.js 338KB
bundler.js 200KB
bundler.js 198KB
bundler.js 197KB
index.js 196KB
cax.js 195KB
bundler.js 194KB
cax.js 193KB
bundler.js 191KB
bundler.js 190KB
bundler.js 190KB
bundler.js 189KB
bundler.js 184KB
bundler.js 184KB
bundler.js 184KB
bundler.js 183KB
bundler.js 180KB
bundler.js 161KB
bundler.js 158KB
bundler.js 158KB
bundler.js 156KB
bundler.js 153KB
bundler.js 151KB
cax.min.js 96KB
bundler.js 39KB
to.js 39KB
to.min.js 19KB
tween.js 16KB
tween.js 16KB
stage.js 9KB
path.js 8KB
main.js 7KB
canvas-render.js 7KB
hit-render.js 7KB
to.js 6KB
to.js 6KB
display-object.js 6KB
sprite.js 4KB
we-stage.js 4KB
arc-to-bezier.js 4KB
main.js 3KB
button.js 3KB
graphics.js 3KB
a2c.js 3KB
main.js 3KB
index.js 3KB
matrix2d.js 3KB
wx-hit-render.js 3KB
blur.js 3KB
webpack.config.js 3KB
renderer.js 3KB
enemy.js 3KB
index.js 3KB
webpack.config.js 2KB
raf-interval.js 2KB
共 241 条
- 1
- 2
- 3
资源评论
天天501
- 粉丝: 596
- 资源: 4666
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功