Simple, light-weight, Canvas library for 2D rendering
Features
-
Chain
API -
Drawing
actions
reusable -
Same methods as CanvasRenderingContext2D
Install
npm install we-render
Usage
- ES6 module
import { WeCanvas, WeStage } from 'we-render'
const child = new WeCanvas()
.setSize(100, 100)
.scale(2, 2)
.fillStyle("red") // different here
.fillRect(0, 0, 10, 10)
const stage = new WeStage()
stage.addChid(child)
stage.update()
- In browser
<script type="text/javascript" src="../dist/weRender.min.js"></script>
<script type="text/javascript">
var WeStage = weRender.WeStage;
var WeCanvas = weRender.WeCanvas;
var stage = new WeStage(document.querySelector("#canvas"));
stage.setSize(500, 500);
stage.setStyle("500px", "500px");
var yellowCircle = new WeCanvas({
width: 100,
height: 100,
})
.beginPath()
.fillStyle("yellow")
.arc(50, 50, 50, 0, 2 * Math.PI)
.fill()
stage.addChild(yellowCircle);
stage.update();
</script>
Examples
See examples: npm run static
Scripts
Usefull Scripts, see:
API reference
Modules
- weRender
-
weRender: Simple Canvas library for easy usage
Classes
- WeCanvas
-
WeCanvas: Easy canvas api for using, support useing chain
- Directly use CanvasRenderingContext2D
methods
Property
ofCanvasRenderingContext2D
here ismethod
- Won't really drawing Canvas until run
draw()
- Directly use CanvasRenderingContext2D
- WeStage
-
WeStage: Canvas manager for WeCanvas
weRender
weRender: Simple Canvas library for easy usage
WeCanvas
WeCanvas: Easy canvas api for using, support useing chain
- Directly use CanvasRenderingContext2D
methods
Property
ofCanvasRenderingContext2D
here ismethod
- Won't really drawing Canvas until run
draw()
Kind: global class
new WeCanvas(options)
create a WeCanvas instance
Param | Type | Description |
---|---|---|
options | Object |
option settions for instance |
weCanvas.setSize(width, height)
set canvas size
Kind: instance method of WeCanvas
Param | Type | Description |
---|---|---|
width | Number |
canvas width |
height | Number |
canvas height |
weCanvas.setStyle(width, height)
set canvas style, only width and height
Kind: instance method of WeCanvas
Param | Type | Description |
---|---|---|
width | String |
canvas style width |
height | String |
canvas style height |
weCanvas.setCoordinate(x, y)
set coordinate of stage
Kind: instance method of WeCanvas
Param | Type | Default | Description |
---|---|---|---|
x | Number |
0 |
horizontal axis |
y | Number |
0 |
vertical axis |
weCanvas.setScale(scale)
set init scale
Kind: instance method of WeCanvas
Param | Type | Description |
---|---|---|
scale | Number |
scale ratio |
weCanvas.clear()
clear canvas
Kind: instance method of WeCanvas
weCanvas.getActions()
get actions for context drawing
Kind: instance method of WeCanvas
weCanvas.setActions(actions)
set actions
Kind: instance method of WeCanvas
Param | Type | Description |
---|---|---|
actions | Array |
actions for context drawing |
weCanvas.draw()
run actions, draw canvas
Kind: instance method of WeCanvas
weCanvas.cache(ifCache)
set cache, default: true
Kind: instance method of WeCanvas
Param | Type | Default | Description |
---|---|---|---|
ifCache | Boolean |
true |
if set cache |
WeStage
WeStage: Canvas manager for WeCanvas
Kind: global class
new WeStage(canvas, options)
create a WeStage instance
Param | Type | Description |
---|---|---|
canvas | Canvas |
a Canvas element related to the dom |
options | Object |
stage settings |
weStage.setSize(width, height)
set stage size
Kind: instance method of WeStage
Param | Type | Description |
---|---|---|
width | Number |
stage width |
height | Number |
stage height |
weStage.setStyle(width, height)
set stage style
Kind: instance method of WeStage
Param | Type | Description |
---|---|---|
width | String |
stage style width |
height | String |
stage style height |
weStage.destory()
destrory stage
Kind: instance method of WeStage
weStage.clear()
clear canvas
Kind: instance method of WeStage
weStage.addChild(child)
add child to the stage
Kind: instance method of WeStage
Param | Type | Description |
---|---|---|
child | WeCanvas | Object |
WeCanvas instance or Object cotains Canvas |
weStage.translate(x, y, reset)
translate stage, move coordinate
Kind: instance method of WeStage
Param | Type | Default | Description |
---|---|---|---|
x | Number |
0 |
offset x |
y | Number |
0 |
offset y |
reset | Boolean |
false |
should reset after update |
weStage.update()
update stage, draw child on canvas run this method, all child canvas will draw
Kind: instance method of WeStage
docs autogenerated via jsdoc2md