JS Canvas 画图中的面向对象

最近的发现：IE中支持Canvas的使用：

IE中使用Google的一个类excanvas.js来模拟支持Canvas。

具体的使用中要使用方法的方式来调用：

1、除了在页面中引用这个js文件。

2、请将代码放在页面的ONLOAD方法中调用，以让页面完全加载完毕，之后IE才能支持excanvas.js

关于Canvas的详细使用的方法请参照Opera网站中关于该标签的详细解释：

http://kb.operachina.com/node/190

 

大致看了下这其中的代码，其中的JS都是对象化了的。主要是使用了一个开源的JS类，

/*
    Base, version 1.0.1
    Copyright 2006, Dean Edwards
    License: http://creativecommons.org/licenses/LGPL/2.1/
*/

 

类CanvasWidget：

扩展基类：Base

 

var CanvasWidget = Base.extend({

变量：
    canvas: null,
    context: null,
    position: null,

构造函数：

constructor: function(canvasElementID, position) {
        this.canvas = document.getElementById(canvasElementID);

},

函数：

/**
     * Initializes all the mouse listeners for the widget.
*/
initMouseListeners: function() {
        this.mouseMoveTrigger = new Function();

}

});

 

 

类CanvasPainter扩展CanvasWidget类

var CanvasPainter = CanvasWidget.extend({
    canvasInterface: "",
    contextI: "",

    constructor: function(canvasName, canvasInterfaceName, position) {
        this.canvasInterface = document.getElementById(canvasInterfaceName);

此处调用父类的构造函数：
        this.inherit(canvasName, position);

    }
});

 

 

 

说明 ： 以上代码使用的是1.0.1的Base类。   现在已经升级到1.1a的版本，调用父类方法的方式也变了，变成

 this.base(canvasName, position);

评论

1 楼 hellomaya007 2012-05-10  

能留个扣吗？我也研究过这段代码，有些地方想请教