将代码添加到每个画布上下文方法

Question

我正在尝试为在canvas上下文中调用的每个方法添加一些代码.我试图这样做,所以我可以将每个命令添加到一个命令数组.这是我认为有效的代码(但不是):

var canvas = Object.getPrototypeOf(document.createElement('canvas').getContext('2d'));
for(p in canvas){
    if(canvas.hasOwnProperty(p)){
        var original = canvas[p];
        canvas[p] = function(){

            //extra code to be run

            return original.apply(this,arguments);
        }
    }
}

在我看来,这似乎应该有效,但事实并非如此.如果我在一个例子中使用这个代码,我会得到一个NOT_SUPPORTED_ERR: DOM Exception 9

演示:http://jsfiddle.net/J3tUD/2/

Answer 1

您遇到的问题是变量不是块作用域的事实.

当您的函数运行时,它会更新上下文原型,以便每个函数调用相同的函数original,这是原始原型拥有的最后一个元素.在这种情况下,就是这样webkitGetImageDataHD.

这意味着当你打电话给ctx.beginPath();你真的打电话ctx.webkitGetImageDataHD();.这个方法需要4个参数,因为它没有得到它们,所以抛出了DOM Exception 9.

由于JavaScript不支持块范围,因此必须使用函数强制更改范围.修改你的例子,我们可以创建一个新函数,其中original是一个固定值:

var context = Object.getPrototypeOf(document.createElement('canvas').getContext('2d'));

function bind(context, p) {
    // context, p, and original never change.
    var original = context[p];
    context[p] = function(){
        console.log(p, arguments);
        return original.apply(this,arguments);
    }
}

// p changes with every iteration.
for(p in context){
    if(context.hasOwnProperty(p)){
        bind(context, p);
    }
}

在这里找到一个工作演示:http://jsfiddle.net/bnickel/UG9gF/