当前位置:  软件>JavaScript软件

对象化 Canvas oCanvas

    来源:    发布时间:2015-02-04

    本文导语:  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.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3