we-render v1.0.2
weRender
Simple, light-weight, Canvas library for 2D rendering
Features
Chain
APIDrawing
actions
reusableSame 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
simple
clone
reuse actions
composite
zoom
Scripts
Usefull Scripts, see:
- scripts
API reference
Modules
Classes
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