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);
});
}
});
}
项目主页：
扩展阅读HTML5之美
HTML5之美
以开发者的视角整理编排的前端开发所使用语言的主流学习资源
为您推荐使用 PhysicsJS 构建一个 2D 的浏览器游戏
Alamofire 入门指南，基于Swift的Http网络工具包
程序员瑞典最大的约会网站的开发测试经验
hackathon-starter - A boilerplate for Node.js web applications
origami.js – HTML5 Canvas for Humans
更多HTML5
图表/报表制作
相关文章
精彩导读
热门资讯
关注我们
