1

我正在为画布中的数学图形制作一个库，在此之前，我的方法是直接将方法添加到全局上下文原型中，因此

CanvasRenderingContext2D.prototype.point=function(x,y){
    this.fillRect(x,y,1,1);
};

但是，我发现不推荐这样做，所以我现在正在尝试制作一个全局对象，因此

window.Graph=function(context){
    this.ctx=context;
    alert(this.ctx);
    this.CanvasRenderingContext2D.prototype.point=function(x,y){
        this.ctx.fillRect(x,y,1,1);
    };
};

我也试过

this.ctx.prototype.point=function(x,y){
        this.ctx.fillRect(x,y,1,1);
};

它们都返回错误，例如cannot set property 'point' to undefined

调用它的理想方式是

var g=new Graph(ctx);
g.point(5,5);

最好的方法是什么？

谢谢

4

2 回答 2

3

这是您要查找的内容：

function Graph(context) {
    this.context = context;
}

Graph.prototype.point = function (x, y) {
    this.context.fillRect(x, y ,1, 1);
}

var g = new Graph(context);
g.point(5, 5);
于 2013-05-16T16:34:54.600 回答
2

plalx 展示了一个很棒的设计模式......

这只是另一个带有构造函数的：

var Graph = (function () {

    // constructor
    function Graph(context) {

        // "class" properties go here
        this.context = context;
    }

    // "class" methods added to prototype here
    Graph.prototype.point = function (x,y) {
        this.context.fillRect(x,y,1,1);
    };

    // return a self reference
    return Graph;

})();    // make class available by self-executing

// instantiate your Graph class into a graph object
var graph = new Graph(context);
于 2013-05-16T17:39:52.990 回答