专栏首页LeoXu的博客oCanvas 教程学习摘要(一) 转

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • oCanvas 教程学习摘要(二) 转

    Core是在全局的oCanvas对象上使用create()方法创建出来的 oCanva Core 实体。

    LeoXu
  • ActionScript语言基础 原

    ActionScript支持比JavaSctipt所支持的更新的ECMAScript标准实现版本。

    LeoXu
  • Eclipse中做Android开发LogCat的使用

    LogCat是Eclipse里面做Android开发的工具包ADT中的一个工具,用来查看和过滤Android日志系统的输出。

    LeoXu
  • Android studio 实现随机位置画10个随机大小的五角星的代码

    Android studio:实现随机位置画10个随机大小的五角星今天做了一下老师布置的实验课作业安卓的作业。实现在屏幕上随机位置绘制10个随机大小的五角星。虽...

    砸漏
  • 【Go 语言社区】HTML5 canvas验证码识别

    canvas 的历史这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为,但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把...

    李海彬
  • 结合d3.js实现气象数据的可视化

    需要将格点气象数据实现前端的展示,数据传输的方式有三种:1、json;2、二进制;3、灰度图。三种方式各有优劣,这个需要在实际的项目中去酌情选择,本文为方便理解...

    lzugis
  • 【Canvas】311- 解决 canvas 在高清屏中绘制模糊的问题

    因为 canvas 不是矢量图,而是像图片一样是位图模式的。高 dpi 显示设备意味着每平方英寸有更多的像素。也就是说二倍屏,浏览器就会以 2 个像素点的宽度来...

    pingan8787
  • 解决canvas在高清屏中绘制模糊的问题

    因为 canvas 不是矢量图,而是像图片一样是位图模式的。高 dpi 显示设备意味着每平方英寸有更多的像素。也就是说二倍屏,浏览器就会以 2 个像素点的宽度来...

    pingan8787
  • 要直接,不要怂,谈钱才不伤感情

    中国社会的教育,一方面要强调做人道德要高尚,一方面又要大家压抑对自己正当利益的追求和捍卫。比如说志士不饮盗泉之水,都要渴死了,还宣扬不能去喝名字听起来不对的水。...

    纯洁的微笑
  • 标准库类型

    一.标准string类型     string类型支持长度可变的字符串,C++标准库将负责管理与存储字符相关的内存,以及提供各种有用的操作。 1.1 strin...

    猿人谷

扫码关注云+社区

领取腾讯云代金券