origami.js – HTML5 Canvas for Humans
來自： https://github.com/raphamorim/origami.js
HTML5 Canvas for Humans
Initially it's a tool for teaching geometry, web and javascript in schools. Currently it's a powerful library to create using HTML5 Canvas
Summary
- Why Origami.js?
- Styling with CSS
- Getting
- Usage
- draw
- rect
- line
- arc
- polygon
- shape
- text
- image
- load
- clear
- background
- getContexts
- canvasCtx
- composition
- translate
- flip
- rotate
- restore
- save
- on
- Animation
- sprite
- nextFrame
- stopFrame
- examples
- Browser Support
- Contributing
- License
Why?
For many developers, learning the canvas API can be challenging. But the learning curve might be reduced with a few simplifications: a chainable canvas, stylization of objects using familiar CSS notation, and easy access to the context using selectors.
Origami began as a project to teach javascript and geometry to children and today has been used to simplify the way we work with canvas (currently only in the 2d context, but in the future it will also support WebGL).
Styling with CSS
For those who use native canvas, you need to adapt to a different way to apply styles to a shape. The origami.js lets you use the CSS notation in a javascript object to use and apply on a shape.
Let's see:
<canvas class="canvas-class"></canvas>
var style = {
color: '#000',
font: '70px Helvetica',
align: 'center',
border: '2px gold'
};
origami('.canvas-class')
.text("Nice!", 100, 100, style)
.text("Really Nice!", 150, 150, style)
origami.draw();</pre>
You can use pure CSS to style a shape. SeeShape.
Getting
First of all, get Origami.js usingDownload Option or via bower.
To get using Bower just run this command
bower install origamijs
Or get using NPM just run this command
npm install origamijs
Add the source before body tag end:
<script src="origami.min.js"></script>
</body>
Usage
draw
Method that performs the operation of drawing. If you forget to use, nothing will happen :)
origami('#canvas')
.arc(100, 75, 50, {
background: '#2A80B9',
border: '4px gold' })
.draw();
rect
origami('.canvas')
.rect(10, 10, 50, 100, {
background: 'lightblue',
border: '4px #999'
})
.rect(50, 10, 40, {
background: 'lightgreen',
border: '10px green'
})
.draw()
Result:
line
origami('.one')
.line({x: 10, y: 10}, {x: 150, y: 200}, {
background: '#888' })
.draw();
Result:
arc
var style = {
background: '#2A80B9',
border: '4px gold'
}
origami('.element')
.arc(100, 75, 50, style)
.draw();</pre>
Result:
polygon
origami('.one')
.polygon({x: 100, y: 110}, {x: 200, y: 10}, {x: 300, y: 110}, {
background: '#2A80B9' })
.draw();
Result:
shape
CSS properties:
.pac-man {
width: 0px;
height: 0px;
border-right: 60px solid transparent;
border-top: 60px solid red;
border-bottom: 60px solid red;
border-left: 60px solid red;
border-top-right-radius: 60px;
border-top-left-radius: 60px;
border-bottom-right-radius: 60px;
border-bottom-left-radius: 60px;
}
Load Styles and apply style rules on Shape (empty object canvas)
origami('#canvas-id')
.styles('.pac-man')
.shape('.pac-man')
.draw();
Result:
text
origami('.one')
.text("Nice!", 100, 100, {
color: '#000',
font: '70px Helvetica',
align: 'center',
border: '2px gold'
})
.draw()
Result:
image
var img = document.querySelector('#my-image');
origami('.canvas').image(img, 10, 10, width, height)
// OR
origami('.canvas').image('images/dog.jpg', 10, 10)</pre>
load
When you use images, external resources if you do not load them. The script cannot run. The load method expects to obtain these resources when not cached.
origami('.canvas')
.image('images/dog.jpg')
.load(function(canvas) {
canvas.draw();
})
clear
origami('.one').clear()
background
origami('#demo-1').background('#2A80B9')
getContexts
console.log(origami.getContexts()); // Array of all Origami contexts
canvasCtx
var ctx = origami('#canvas').canvasCtx(); // CanvasRenderingContext2Dcanvas
// After loaded you can use without specify selector/context
console.log(origami.canvasCtx()) // CanvasRenderingContext2Dcanvas from '#canvas'
// You can use origami with contextObject too :)
origami(ctx).canvasBackground('blue');</pre>
composition
Alias to globalCompositeOperation
Default: source-over
origami('#my-canvas').composition('source-in')
translate
Additional Options:
- center (apply in canvas center)
- reset (apply in canvas x: 0, y: 0 coordinates)
origami('#my-canvas').translate('center');
// OR
origami('#my-canvas').translate(10, 50);
// OR
origami('#my-canvas').translate(); // Equals: reset</pre>
flip
Alert: Experimental feature
Default: horizontal
Options: horizontal , vertical
origami('#demo-1')
.flip('horizontal')
.image('images/person.jpg', 0, 0, 200, 200)
Original Image
Result
rotate
Default: slow Options: slow , normal , fast
origami('#my-canvas').rotate(degrees);
restore
origami('#my-canvas').restore();
save
origami('#my-canvas').save();
on
Wrapper to addEventListener
origami(".canvas-class").on('click', clickEvent)
function clickEvent(e) {
console.log(e.pageX, e.pageY);
}</pre>
Animation
sprite
frames : required
src : required
speed : optional
loop : optional (default: true )
origami('#demo-1')
.canvasBackground('#2A80B9')
.sprite(40, 30, {
src: 'images/coin-sprite.png',
frames: 10,
speed: 60,
loop: true
})
Result:
nextFrame
Causes execution of a callback (through requestAnimationFrame)
origami('#demo-1').nextFrame(frame)
stopFrame
Stop frame animation
origami('#demo-1').stop(frame)
First Example:
var rotation = 0;
function draw() {
rotation = rotation + 0.1;
origami('#demo-1')
.clear()
.arc(150, 150, 100)
.save()
.translate(150, 150)
.rotate(rotation)
.arc(18, 50, 5, {
background: 'darkred'})
.restore()
.nextFrame(draw) }
Result:
Second Example:
Rewrite example of MDN on translation and rotation using origami.js
Original Code:
var sun = new Image();
var earth = new Image();
function init(){
sun.src = '
ctx.globalCompositeOperation = 'destination-over';
ctx.clearRect(0,0,300,300); // clear canvas
ctx.fillStyle = 'rgba(0,0,0,0.4)';
ctx.strokeStyle = 'rgba(0,153,255,0.4)';
ctx.save();
ctx.translate(150,150);
// Earth
var time = new Date();
ctx.rotate( ((2Math.PI)/60)time.getSeconds() + ((2Math.PI)/60000)time.getMilliseconds() );
ctx.translate(105,0);
ctx.fillRect(0,-12,50,24); // Shadow
ctx.drawImage(earth,-12,-12);
ctx.restore();
ctx.beginPath();
ctx.arc(150,150,105,0,Math.PI*2,false); // Earth orbit
ctx.stroke();
ctx.drawImage(sun,0,0,300,300);
window.requestAnimationFrame(draw);
}
init();</pre>
Rewritten Code with origami.js:
function draw() {
origami('#canvas')
.composition('destination-over')
.clear()
.save()
.translate(150,150)
.rotate('slow')
.translate(105,0)
.image('images/Canvas_earth.png', -12, -12)
.restore()
.arc(150,150,105, {
border: '1px #FFF'
})
.image('images/Canvas_sun.png')
.load(function(canvas){
canvas.draw()
canvas.nextFrame(draw)
})
}
Result:
Browser Support
 |
 |
 |
 |
 |
|---|---|---|---|---|
| 42+ ? | 40+ ? | 8+ ? | 29+ ? | 8+ ? |
Roadmap:
- Next Release
- line (2d) [CHECKED]
- rect (2d) [CHECKED]
- polygon (2d) [CHECKED]
- arc (2d) [CHECKED]
- image (2d) [CHECKED]
- text (2d) [CHECKED]
- getContext [CHECKED]
- rotate [CHECKED]
- translate [CHECKED]
- stop animation [CHECKED]
- sprite [CHECKED]
- scale [CHECKED]
- mirror (horizontal and vertical) [CHECKED]
- use origami by context instead selector [CHECKED]
- on (event) [CHECKED]
- compute CSS style to canvas objects [CHECKED]
- write tests :)
- docs with examples and tutorial
- docs with examples by other users
- docs with live console
- write tests :)
Future Releases
- .hover, .click -> fn to current object
- Improve style and shape (add more features)
- .element (draw a entire element in canvas)
- quadraticCurveTo
- centerOf
- animation based on CSS
- own create gradient to use
- render with textures
- switch to WebGL
- cube (3d)
- cone (3d)
- cylinder (3d)
Suggestions: interpolation D3 (animation) tween
Contributing
Want to contribute? Follow these recommendations .
License
