canvas_library
canvas_library copied to clipboard
dkln
HTML 5 Canvas library (a flash alternative) written in Coffeescript
= HTML Canvas Javascript Library
== About canvas_library
canvas_library is written in CoffeeScript. canvas_library gives you easy drawing, object and animation management for the HTML 5 Canvas element. The API itself looks a lot like the Flash drawing API.
== Getting started
A very simple demo:
HTML:
Coffeescript: run = -> # this is the screen stage = new CanvasLibrary.Stage('test_canvas')
# create a rectangle
someShape = new CanvasLibrary.Shape()
someShape.x = 0
someShape.y = 0
someShape.fillStyle 'rgba(0, 0, 0, 1)'
someShape.fillRect 0, 0, 50, 50
# create another rectangle
otherShape = new CanvasLibrary.Shape()
otherShape.alpha = .5
otherShape.fillStyle 'rgba(255, 0, 0, 1)'
otherShape.fillRect 0, 0, 25, 25
otherShape.x = 10
otherShape.y = 10
otherShape.scaleX = 1
otherShape.scaleY = 1
stage.addChild someShape
stage.addChild otherShape
# setup renderer and connect it to the stage and run at 25 fps
renderer = new CanvasLibrary.Renderer(stage, 25)
renderer.run()
# tween some stuff
Tween.to someShape, 5000, { x: 100, y: 100 }
Tween.to otherShape, 20000, { rotation: 180, x: 320, y: 200, alpha: 1, scaleX: 1, scaleY: 1 }
window.onload = run
== About DisplayContainer's
A DisplayContainer is an object that can hold other graphical objects. These graphical objects can be nested in eachother. Just like
The +x+ and +y+ position of graphical objects are relative and are translated to canvas +x+ and +y+ positions during the rendering process. This rendering process can be triggered by calling the +draw+ function on any displaycontainer.
Nesting objects: obj = new CanvasLibrary.Shape() obj.x = 10 obj.y = 10
otherObj = new CanvasLibrary.Shape() otherObj.x = 0 otherObj.y = 0
obj.addChild otherObj
yetAnotherObj = new CanvasLibrary.Shape() yetAnotherObj.x = 0 yetAnotherObj.y = 0
otherObj.addChild yetAnotherObj
stage.render
Note: The stage is the main screen. This object also acts as an DisplayContainer.
== Drawing shapes
The drawing API is almost the same as the Canvas drawing API. If you want to draw paths to the canvas, use the +Shape+ class.
Drawing rectangles: stage = new CanvasLibrary.Stage("the_screen");
rect = new CanvasLibrary.Shape() rect.x = 0 rect.y = 0 rect.fillStyle "rgb(255, 0, 0, 1)" rect.fillRect 0, 0, 25, 25
rect.fillStyle "rgb(0, 255, 0, 0.5)" rect.fillRect 10, 10, 25, 25
stage.addChild rect stage.render
== Loading and drawing bitmaps
Bitmaps can easily be loaded with the +canavaslib.StackedLoader+ class. The +StackedLoader+ manages all your assets so you can preload images or audio assets before rendering all your stuff. screen = new CanvasLibrary.Stage("the_screen")
CanvasLibrary.StackedLoader.add "image_id", "image", "logo.png" CanvasLibrary.StackedLoader.add "another_image", "image", "foo.png" CanvasLibrary.StackedLoader.add "and_another_one", "image", "bar.png"
CanvasLibrary.StackedLoader.load => bitmap = CanvasLibrary.StackedLoader.get "image_id"
screen.addChild bitmap
screen.render
The +load+ function adds an asset to the loadstack. The +start+ function triggers the StackedLoader to load all assets that are placed in the load stack.
== Animating objects
You can use the +Tween+ class to tween objects between two points.
... renderer = new CanvasLibrary.Renderer(stage); renderer.run 25
... Tween.to someShape, 5000, { x: 100, y: 100 }
The above example will tween the +x+ & +y+ property of object +someShape+ to coordinate 100 in 5 secs.
Note: to use the tween engine, you'll need to set up a renderer with +Renderer+ or call the +Tween+ +update+ method yourself:
Tween.update()
== Mouse interaction
You have a couple of mouse events to your disposal:
- onMouseOver
- onMouseOut
Example of tween and mouse interaction: shape.onMouseOver = => Tween.to shape, 500, { alpha: .5 }
shape.onMouseOut = => Tween.to shape, 500, { alpha: 1 }
== Pixel fun
pixels = new CanvasLibrary.PixelSprite() pixels.drawPixel 0, 0, 'rgba(128, 128, 128, 1)' pixels.drawPixel 1, 0, 'rgba(128, 128, 128, 1)' pixels.drawPixel 2, 0, 'rgba(128, 128, 128, 1)' pixels.drawPixel 0, 1, 'rgba(128, 128, 128, 1)' pixels.drawPixel 0, 2, 'rgba(128, 128, 128, 1)' pixels.drawPixel 0, 3, 'rgba(128, 128, 128, 1)'
pixels.submitPixel()
screen.addChild pixels
Or even better, load a retro sprite file!
CanvasLibrary.StackedLoader.add 'logo', 'sprite', 'logo.spr'
CanvasLibrary.StackedLoader.load => logo = CanvasLibrary.StackedLoader.get 'logo' screen.addChild logo
== Development
Want to extend the library? If you are using rvm that should be a breeze!
bundle install guard
= License and credits Use it and have fun with it! Comments, cakes and hugs are welcome! Just stick to the license!
Copyright 2010 - 2011, Diederick Lawson - Altovista. Released under the FreeBSD license.
dkln