sorted by: recent | see :
popular
Content Tagged with canvas + dojo
Comet and Vector Graphics with Dojo (dojo.gfx)
better than Comet, a subset of SVG
Presentaciones Dojo
presentaciones sobre Dojo y su lib gfx, y comet
dojo.gfx presentations in dojo.gfx
Dylan Schiemann has posted his presentations on dojo.gfx which are themselves written in dojo.gfx instead of Powerpoint/Keynote/S5.
- Web Vector Graphics and Dojo - Draw This!
- Web Vector Graphics: Myth or Reality?
- Vector Graphics and Comet with Dojo
It would be nice if you some key bindings were put into the presentations :)
Vitamin Features » Print » Create cross browser vector graphics
como usar graficos vectoriales crossbrowser con dojo ^_^
Create cross browser vector graphics with Dojo
Dylan Schiemann, co-creator of the Dojo toolkit, has written a broad piece on creating cross browser vector graphics with Dojo.
The article delves into the new dojo.gfx library that abstracts the slight mess of SVG vs. Canvas vs. VML.
One of the examples in the article discusses drawing a clock with this snippet that shows drawing the clock hands, along with their shadows:
JAVASCRIPT:
-
-
this.shadows.hour.shadow = this._initPoly(this.surface, hP)
-
.setFill([0, 0, 0, 0.1]);
-
this.hands.hour = this._initPoly(this.surface, hP)
-
.setStroke({color: this.handStroke, width:1 })
-
.setFill({
-
type:"linear",
-
x1:0, y1:0, x2:0, y2:-27,
-
colors:[{offset:0, color:"#fff"}, {offset:0.33, color:this.handColor}]
-
});
-
this.shadows.minute.shadow = this._initPoly(this.surface, mP)
-
.setFill([0, 0, 0, 0.1]);
-
this.hands.minute = this._initPoly(this.surface, mP)
-
.setStroke({color: this.handStroke, width:1 })
-
.setFill({
-
type:"linear",
-
x1:0, y1:0, x2:0, y2:-38,
-
colors:[{offset:0, color:"#fff"}, {offset:0.33, color:this.handColor}]
-
});
-
What features are supported
- Strokes (borders)
- Fills
- Shapes and Paths
- Opacity
- Linear Transformations
- Rounded Corners
If you have wanted "the ability to draw and modify non-rectangular, browser-native shapes" then check out the article and dig deeper:
- Dojo: documentation, book, and download
- Clock: demo and source
- Circles: demo and source
- Charts: demo
- Canvas: mozilla tutorial
- Comet: Cometd, Lightstreamer, KnowNow, and DWR