canvas教程

oCanvas 教程学习摘要(一)

字号+ 作者:H5之家 来源:H5之家 2015-10-21 19:45 我要评论( )

oCanvas 教程学习摘要(一):1、oCanvas对象 oCanvas 是一个全局对象,包含了所有的模块,以及核心的构造器和一些其它的方法。 2、c...

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

2、create(settings)
create 方法被用来设置一个核心实体,核心实体是每个oCanvas对象都需要的,所以调用create方法就能保证你能访问到核心实体。
settings 是一个对象入参,可选属性如下:
返回值:
新创建的核心实体
示例:
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.str 2000 okeStyle = 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"] });

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • fd详细教程|Excel_VBA_详细教程

    fd详细教程|Excel_VBA_详细教程

    2017-05-02 18:01

  • SketchBook 2014 基础入门视频教程

    SketchBook 2014 基础入门视频教程

    2017-05-01 11:00

  • HTML样式CSS

    HTML样式CSS

    2017-05-01 10:03

  • 学习慕课网canvas倒计时实例笔记

    学习慕课网canvas倒计时实例笔记

    2017-04-30 14:01

网友点评
>