canvas教程

简化HTML5 Canvas的使用的JavaScript框架

字号+ 作者:H5之家 来源:H5之家 2017-10-21 17:23 我要评论( )

oCanvas是一个JavaScript框架,用于简化HTML5 Canvas标签的使用。可以利用对象来代替像素。 oCanvas 可以帮助你很容易的在 HTML5 的 Canvas 标签上创建对象,并且创建这些对象的动画。 可以利用oCanvas做很多事件,比如创建图表等。var canvas = oCanvas.cre

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); }); } }); }

demo-front.png



项目主页:

扩展阅读
HTML5之美
HTML5之美
以开发者的视角整理编排的前端开发所使用语言的主流学习资源

为您推荐使用 PhysicsJS 构建一个 2D 的浏览器游戏
Alamofire 入门指南,基于Swift的Http网络工具包
程序员瑞典最大的约会网站的开发测试经验
hackathon-starter - A boilerplate for Node.js web applications
origami.js – HTML5 Canvas for Humans
更多HTML5
图表/报表制作

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  •  Canvas 学习把玩上吧

    Canvas 学习把玩上吧

    2017-10-21 17:38

  • HTML5的Canvas画图模拟太阳系运转

    HTML5的Canvas画图模拟太阳系运转

    2017-10-21 16:03

  • html5在canvas中插入图片

    html5在canvas中插入图片

    2017-10-21 13:30

  • canvas学习(一):线条,图像变换和状态保存

    canvas学习(一):线条,图像变换和状态保存

    2017-10-21 08:00

网友点评
a