对象化 Canvas oCanvas
本文导语: oCanvas 可以帮助你很容易的在 HTML5 的 Canvas 标签上创建对象,并且创建这些对象的动画。支持包括 IE9 以及更新版本和其他包括 FF、Chrome、Safari 和 Opera 浏览器。 该库包含 9 部分: oCanvas Object: which represents the HTML5 Canvas element it...
oCanvas 可以帮助你很容易的在 HTML5 的 Canvas 标签上创建对象,并且创建这些对象的动画。支持包括 IE9 以及更新版本和其他包括 FF、Chrome、Safari 和 Opera 浏览器。
该库包含 9 部分:
oCanvas Object: which represents the HTML5 Canvas element itself, where everything will be built.
Core: is the main instance which defines all other elements.
Display Objects: representing the main predefined geometrical elements (lines, triangles, rectangles, etc.).
Background: stores settings of object surface.
Canvas.Timeline: facilitates the creation of loops for moving objects.
Events: capturing the events that can occur with the keyboard, mouse, and touch.
Scenes: We can group objects into independent "frames".
Animation: Lets you create short animations for each object.
Draw: Module that allows you to clean or repaint the scenes.
示例代码:
function createAnim() { //Block 1 var tela = oCanvas.create({ canvas: "#canvas", background: "#ccc" }); //Block 2 var quadrado = tela.display.rectangle({ x: 25, y: 25, width: 20, height: 20, fill: "#0aa", velocX: 4, velocY: 4 }); tela.addChild(quadrado); //Block 3 tela.bind("click tap", function() { quadrado.x = tela.mouse.x; quadrado.y = tela.mouse.y; }); //Block 4 tela.setLoop(function() { quadrado.x += quadrado.velocX; quadrado.y += quadrado.velocY; quadrado.rotation++; if ((quadrado.x = (tela.width))) quadrado.velocX = -quadrado.velocX; if ((quadrado.y (tela.height - 20))) quadrado.velocY = -quadrado.velocY; }).start(); }
您可能感兴趣的文章:
本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。