oCanvas - 簡化HTML5 Canvas的使用的JavaScript框架

oCanvas是一個JavaScript框架，用于簡化HTML5 Canvas標簽的使用。可以利用對象來代替像素。
oCanvas 可以幫助你很容易的在 HTML5 的 Canvas 標簽上創建對象，并且創建這些對象的動畫。
可以利用oCanvas做很多事件，比如創建圖表等。

var canvas = oCanvas.create({
    canvas: "#canvas",
    background: "#222",
    fps: 60
});

var data = [25, 65, 10];
var prototype = canvas.display.arc({
    x: canvas.width / 2,
    y: canvas.height / 2,
    radius: 75,
    strokeWidth: 150
});
var pieces = [], end, lastEnd;
for (var i = 0; i < data.length; i++) {

end = (i > 0 ? lastEnd : 0) + 360 / (100 / data[i]) - (i < 1 ? 90 : 0);

pieces.push(prototype.clone({
    start: (i < 1 ? -90 : lastEnd),
    end: end,
    strokeColor: "hsl(195, "+ (100 - i*10) +"%, "+ (50 - i*10) +"%)"
}));

canvas.addChild(pieces[i]);
lastEnd = end;

pieces[i]._start = pieces[i].start;
pieces[i]._end = pieces[i].end;

pieces[i].bind("mouseenter touchenter", function () {
    this.radius = 77;
    this.strokeWidth = 154;
    canvas.redraw();
}).bind("mouseleave touchleave", function () {
    this.radius = 75;
    this.strokeWidth = 150;
    canvas.redraw();
}).bind("click tap", function () {
    for (var i = 0; i < pieces.length; i++) {
        pieces[i].animate({
            start: 0,
            end: 0,
            opacity: 0
        }, 500, function () {
            this.animate({
                start: this._start,
                end: this._end,
                opacity: 1
            }, 500);
        });
    }
});

}</pre>



項目主頁：http://www.baiduhome.net/lib/view/home/1329631230609