3

我需要在画布 2D 上下文中每次调用函数 drawImage() 时执行一些代码。

game.canvas = document.getElementById('canvas');
game.ctx = game.canvas.getContext("2d");

不幸的是，它并不像看起来那么容易。

我试图这样做：

game.ctx.drawImageOld = game.ctx.drawImage;
game.ctx.drawImage = function(i,x,y,u,v){console.log("ok"); game.ctx.drawImageOld(i,x,y,u,v);}
game.ctx.drawImage(myImage, 10, 10);
// logs "ok" two times on FF

和这个

CanvasRenderingContext2D.prototype.drawImageOld = CanvasRenderingContext2D.prototype.drawImage;
CanvasRenderingContext2D.prototype.drawImage = function(i,x,y,u,v){console.log("ok"); this.drawImageOld(i,x,y,u,v);}
game.ctx.drawImage(myImage, 10, 10);
// logs "ok" two times

但是本机 drawImage 永远不会执行......

我该怎么做？是否有另一种“检测”函数调用的方法？

谢谢。

4

1 回答 1

5

你打电话时

CanvasRenderingContext2D.prototype.drawImageOld(i,x,y,u,v);

然后在里面drawImageOld，this将引用CanvasRenderingContext2D.prototype，而不是实际的 Context2D 实例。这基本上就是错误告诉你的内容。

您可以使用.call [MDN]或.apply [MDN]显式传递实例：

(function() {
    var orig_drawImage = CanvasRenderingContext2D.prototype.drawImage;

    CanvasRenderingContext2D.prototype.drawImage = function() {
        console.log("ok");
        orig_drawImage.apply(this, arguments);
    };
}());

话虽如此，不能保证这将适用于所有浏览器。宿主对象，即 ECMAScript 规范未涵盖的对象，并不总是必须遵循所有规则。一些浏览器也可能定义 drawImage为只读。

于 2013-06-22T13:08:58.213 回答