oCanvas

对象化 Canvas
授权协议 MIT
开发语言 JavaScript
所属分类 Web应用开发、 HTML5开发相关
软件类型 开源软件
地区 不详
投 递 者 长孙嘉
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

oCanvas 可以帮助你很容易的在 HTML5 的 Canvas 标签上创建对象,并且创建这些对象的动画。支持包括 IE9 以及更新版本和其他包括 FF、Chrome、Safari 和 Opera 浏览器。

该库包含 9 部分:

  1. oCanvas Object: which represents the HTML5 Canvas element itself, where everything will be built. 

  2. Core: is the main instance which defines all other elements. 

  3. Display Objects: representing the main predefined geometrical elements (lines, triangles, rectangles, etc.). 

  4. Background: stores settings of object surface. 

  5. Canvas.Timeline: facilitates the creation of loops for moving objects. 

  6. Events: capturing the events that can occur with the keyboard, mouse, and touch. 

  7. Scenes: We can group objects into independent "frames". 

  8. Animation: Lets you create short animations for each object. 

  9. 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 <= 0) || (quadrado.x >= (tela.width)))  
      quadrado.velocX = -quadrado.velocX;
    if ((quadrado.y < 20) || (quadrado.y > (tela.height - 20))) 
      quadrado.velocY = -quadrado.velocY;
  }).start();
 
}
  • ocanvas是一个全局对象,它包含了所有的模块,以及核心构造函数和一些其他的方法。 #方法及属性 1.oCanvas.create(canvas,background,clearEachFrame,drawEachFrame,fps,plugins,disableScrolling)     设置新的核心实例。参数设置:    canvas:指定的canvas元素,字符串或者一个HTMLCanv

  • ocanvas, 基于对象的画布绘制JavaScript库 源代码名称:ocanvas 源代码网址:http://www.github.com/koggdal/ocanvas ocanvas源代码文档 ocanvas源代码下载 oCanvas - 基于对象的画布绘图 oCanvas通过在原生像素绘制方法和创建的对象之间创建桥梁和添加到画布上,使得画布开发更容易理解和实现。 现在可以以很容易地创建对

  • 本文实例讲述了JS基于ocanvas插件实现的简单画板效果。分享给大家供大家参考,具体如下: 使用ocanvas做了个简单的在线画板。 ocanvas参考: 效果如下: 主要代码如下: oCanvas Example 更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与

 相关资料
  • JavaScript 是使用“对象化编程”的,或者叫“面向对象编程”的。所谓“对象化编程”,意思是把 JavaScript 能涉及的范围划分成大大小小的对象,对象下面还继续划分对象直至非常详细为止,所有的编程都以对象为出发点,基于对象。小到一个变量,大到网页文档、窗口甚至屏幕,都是对象。这一章将“面向对象”讲述 JavaScript 的运行情况。 对象的基本知识 对象是可以从 JavaScript

  • 主要内容:示例我们将一个Java对象序列化为一个Json文件,然后读取该Json文件以获取对象。 在这个例子中,创建一个类。 然后将对象列化后存储在文件中,该文件将具有对象的json表示形式。 示例 在中创建一个名为的Java类文件,参考以下代码 - 执行上面示例代码,得到以下结果 -

  • 主要内容:1 编写核心类,2 运行测试本文讲解如何将一个Java对象序列化为一个json文件,然后读取该json文件读取回对象。在下面的示例中,我们创建Student类。使用Jackson存储到一个student.json文件,该文件拥有Student对象的JSON表示形式。 1 编写核心类 MainApp: 2 运行测试

  • 字符串数据编码和解码 # pickle_string.py import pickle import pprint data = [{'a': 'A', 'b': 2, 'c': 3.0}] print('DATA:', end=' ') pprint.pprint(data) data_string = pickle.dumps(data) print('PICKLE: {!r}'.form

  • 问题内容: 我在用Java工作。 我通常会这样设置一些对象: 问题是:在此示例中是否等于,按原样我可以假定对未初始化的对象进行空检查将是准确的? 问题答案: 正确,未显式初始化的引用类型的静态成员和实例成员都由Java 设置为。相同的规则适用于数组成员。 根据Java语言规范的第4.12.5节: 变量的初始值 程序中的每个变量在使用值之前都必须具有一个值: 每个类变量,实例变量或数组组件在创建时均

  • 然后是班级选拔: 教材: 因此,我主要创建新用户并将其序列化: 一切都很完美,但如果我这样做: 然后我想序列化对象用户,程序崩溃了。我得到的结果是: JAVA木卫一。NotSerializableException:在java上。木卫一。ObjectOutputStream。java上的WriteObject 0(ObjectOutputStream.java:1183)。木卫一。ObjectOu