html 5 canvas flash,GitHub - dkln/canvas_library: HTML 5 Canvas library (a flash alternative) writte...
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.