oCanvas 教程学习摘要(一)

1、oCanvas对象

oCanvas 是一个全局对象,包含了所有的模块,以及核心的构造器和一些其它的方法。

2、create(settings)

create 方法被用来设置一个核心实体,核心实体是每个oCanvas对象都需要的,所以调用create方法就能保证你能访问到核心实体。

settings 是一个对象入参,可选属性如下:

  • canvas :字符串或者一个HTMLCanvasElement
  • background :canvas 对象的 background 样式,默认值为transparent
  • clearEachFrame :Boolean
  • drawEachFrame :Boolean
  • fps :Number
  • plugins :Array
  • disableScrolling :Boolean,适用于滑动屏幕上的canvas

返回值:

新创建的核心实体

示例:

var canvas = oCanvas.create({
    canvas: "#canvas",
    background: "#0cc"
});

3、domReady(function)

如果你的脚本是运行于一个canvas元素上的,可以使用 domReady() 方法。

当DOM已经准备好了时,就运行制定的函数。

示例:

oCanvas.domReady(function () {
    var canvas = oCanvas.create({
        canvas: "#canvas",
        background: "#0cc"
    });
});

4、extend(destination, source1[, source2...])

用来自另外一个对象的属性扩展目标对象。

返回值:

返回被扩展的目标对象

示例:

var obj_1 = {
    foo: "bar"
};
var obj_2 = {
    lorem: "ipsum"
};
var obj_3 = {
    foo: "foobar",
    lorem: "loremipsum"
};
oCanvas.extend(obj_1, obj_2);
output("obj_1: ", obj_1);
oCanvas.extend(obj_3, obj_2);
output("obj_3: ", obj_3);
var newObj = oCanvas.extend({}, obj_2, obj_3);
output("newObj: ", newObj);
output("obj_2: ", obj_2);

5、registerDisplayObject(name, constructor[, init])

注册一个新的展示对象模块,使用这个方法注册的对象将会针对每一个创建的新的核心对象被初始化。

如果你想只针对一个特定的核心实体注册一个定制的展示对象,就使用展示模块上的 register() 对象。

输入参数:

name:String,展示对象的名称;通过 core.display.thisname() 可以创建这个对象的一个新的实体。

constructor:Function(user settings, core instance),它也会返回使用了指定的用户设置(user settings)进行扩展的对象。这个对象需要有一个叫做draw()的方法。也要有一个shapeType属性,它是一个取值为rectangular或者radial的字符串。

init:String,可选参数,这是构造器所返回的对象上面的一个方法。这个方法会在每次有展示对象的新实体创建时被调用到。

示例:

var constructor = function (settings, core) {
    return oCanvas.extend({
        core: core,
        shapeType: "rectangular",
        init: function () {

        },
        draw: function () {
            var canvas = this.core.canvas,
                    origin = this.getOrigin(),
                    x = this.abs_x - origin.x,
                    y = this.abs_y - origin.y,
                    width = this.width,
                    height = this.height;
            canvas.beginPath();
            if (this.fill !== "") {
                canvas.fillStyle = this.fill;
                canvas.fillRect(x, y, width, height);
            }
            if (this.strokeWidth > 0) {
                canvas.strokeStyle = this.strokeColor;
                canvas.lineWidth = this.strokeWidth;
                canvas.strokeRect(x, y, width, height);
            }
            canvas.closePath();
        }
    }, settings);
};
oCanvas.registerDisplayObject("myObject", constructor, "init");
var canvas = oCanvas.create({
    canvas: "#canvas",
    background: "#ccc"
});
var myObj = canvas.display.myObject({
    x: 77,
    y: 150,
    width: 200,
    height: 300,
    fill: "#000",
    stroke: "10px #fff"
});
canvas.addChild(myObj);

6、registerModule(name, constructor [, init])

在核心实体上注册新的模块。

示例:

var constructor = function () {
    return {
        foo: "foobar"
    };
};
oCanvas.registerModule("myModule", constructor, "init");
var canvas = oCanvas.create({
    canvas: "#canvas",
    background: "#ccc"
});
output(canvas.myModule.foo);

7、registerPlugin(name, plugin)

注册一个可以在创建新的核心实体时使用的插件。

示例:

var plugin = function () {
    this.background.set("#ff0");
};
oCanvas.registerPlugin("myPlugin", plugin);
var canvas = oCanvas.create({
    canvas: "#canvas",
    background: "#ccc",
    plugins: ["myPlugin"]
});
时间: 2024-10-27 19:21:14

oCanvas 教程学习摘要(一)的相关文章

oCanvas 教程学习摘要(二)

1.Core Core是在全局的oCanvas对象上使用create()方法创建出来的 oCanva Core 实体. 2.Core 实体包含的模块 animation :动画,通常是受到某些事情触发的简短动画. background :背景,用来处理canvas的背景. display :包含了所有已经添加进来的展示对象.调用 core.display.rectangle(settings) 会返回一个新的矩形对象. draw :处理canvas所有的重新绘制工作. events :事件,处理

a byte of vim -- 学习摘要

说在前面的话 -- a byte of vim 是我见过的最介绍vim 最好的书,想了解强大的vim的人,或者是已经在使用vim而打算进一步了解的人,我感觉都应该看看这个,内容精炼但涵盖很广,--"vim为什么这么强大",当看完这本书时,我想你就能完全的了解了--此外,本书是一英文版,但很简单,学语言的同时学习英语很不多-- 附上最新版的下载链接 http://download.csdn.net/detail/wuzhimang/8933257  ,当然上官网才是硬道理 以下是自己针对

.Net程序员之Python基础教程学习----列表和元组 [First Day]

一. 通用序列操作: 其实对于列表,元组 都属于序列化数据,可以通过下表来访问的.下面就来看看序列的基本操作吧. 1.1 索引: 序列中的所有元素的下标是从0开始递增的. 如果索引的长度的是N,那么所以的范围是-N~N-1之间,超过这个范围就会提示 IndexError:  index out of range >>> greeting ='Hello world' >>> print greeting Hello world >>> print gr

[简明python教程]学习笔记之编写简单备份脚本

[[email protected] 0503]# cat backup_ver3.py #!/usr/bin/python #filename:backup_ver3.py import os import time #source source=['/root/a.sh','/root/b.sh','/root/c.sh'] #source='/root/c.sh' #backup dir target_dir='/tmp/' today=target_dir+time.strftime('

《代码大全》学习摘要(五)软件构建中的设计(下)

这次的学习内容主要是设计过程中的启发式方法和设计实践中的一些经验. 对于具体的编程工作来说,期待确定性的行为是很正常的,由于软件设计是非确定性的,灵活熟练地运用一组有效的启发方法(试探法),便成了合理的软件设计的核心工作. 1.在确定设计方案时,首选且最流行的方法是面向对象的方法,此方法的要点是辨别现实世界中的对象以及人造的对象.这个过程分为以下几步:辨识对象及其属性.确定可以对各个对象进行的操作.确定各个对象能对其他对象进行的操.确定对象的哪些部分对其他对象可见.定义每个对象的公开接口. 2.

[简明python教程]学习笔记2014-05-05

今天学习了python的输入输出.异常处理和python标准库 1.文件 通过创建一个file类的对象去处理文件,方法有read.readline.write.close等 [[email protected] 0505]# cat using_file.py #!/usr/bin/python #filename:using_file.py poem='''Programing is fun when the work is done use Python! ''' f=file('poem.

《代码大全》学习摘要(四)伪代码编程过程

今天阅读的是<代码大全>的第9章--"伪代码编码过程".看罢本章,我对于编程的方式方法又有了新的认识,可谓是我觉得收获最大的一章,决心按书中的方法去自己实践一下. 正如作者在这一章末尾提到的,"这本书的一个目的就是告诉你怎样脱离那种先东拼西凑,然后通过运行来看代码是否工作的怪圈"(就我自己写代码的过程来看,与这种方式非常相似),在没有完全想好类和子程序的具体功能和流程就开始编码的结果就是做出一个勉强能运行的程序,它可能漏洞百出,但你不知道问题究竟出在哪里

Webpack新手入门教程(学习笔记)

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; text-align: center; font: 30.0px Helvetica; color: #000000 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 16.0px "PingFang TC Semibold"; color: #000000 } p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0

SQL语句教程学习笔记之一

转自http://www.1keydata.com/cn/sql/ 无论您是一位 SQL 的新手,或是一位只是需要对 SQL 复习一下的资料仓储业界老将, 您就来对地方了.这个 SQL 教材网站列出常用的 SQL 指令.包含以下几个部分: SQL 指令: SQL 如何被用来储存.读取.以及处理数据库之中的资料. 表格处理: SQL 如何被用来处理数据库中的表格. SQL语法: 这一页列出所有在这个教材中被提到的 SQL 语法. 对于每一个指令,我们将会先列出及解释这个指令的语法,然后我们会用一个