Canvas2D
by Christophe VG <[email protected]>
Copyright 2009-2011, Christophe VG
---
Canvas2D is a lightweight OO wrapper API around the HTML5 canvas
element. It offers an extensible shape-oriented interface.
WARNING: the current Canvas2D repository is not stable. Yes, shame on me.
not even the master, I know. I'm currently migrating from our old more closed
git repositories to the open GitHub world. Some issues still need to be
addressed.
In a nutshell:
$ make
*** building build/Canvas2D.js
*** building build/Canvas2D.css
Visit examples/ with your browser to see things in action and
while waiting for me to write decent documentation, study the code.
There is also a Mediawiki extension:
$ make dist
*** packaging Canvas2D distribution
*** packaging Canvas2D src distribution
*** packaging Canvas2D Mediawiki extenstion
$ ls dist/ext/Canvas2D/
Canvas2D.css Canvas2D.js Canvas2D.php LICENSE
Symlink/copy the extension directory to the Mediawiki extensions
directory and add
require_once( "$IP/extensions/Canvas2D/Canvas2D.php" );
to your LocalSettings.php.
In your wiki pages you can include Canvas2D like this:
<canvas2d show="source,console,about" height="250" width="300">
[@ 75, 55] Rectangle rect1 +width=75 +height=75 +color="green";
[@ 50,175] Rectangle rect2 +width=50 +height=50 +color="red";
[@200,100] Rectangle rect3 +width=50 +height=50 +color="blue";
[@200, 25] Rectangle rect4 +width=50 +height=50 +color="yellow";
[@125,175] Rectangle rect5 +width=50 +height=50 +color="red";
Connector conn1 +from="rect1" +to="rect2" +style="vertical";
Connector conn2 +from="rect1" +to="rect3" +style="horizontal";
Connector conn3 +from="rect1" +to="rect4" +style="horizontal";
Connector conn4 +from="rect1" +to="rect5" +style="vertical";
</canvas2d>