動態調用畫布函數

是否有任何方法使用apply（）或類似的方法調用canvas函數，以動態調用畫布方法或能夠傳遞參數數組？動態調用畫布函數

進出口尋找這種效果 context.fillRect.apply(this,args);

2011-12-01 anson

我很好奇，爲什麼你不能直接給他們打電話？ –

你可以，但正如我所說，我想要使用函數字符串或參數數組來動態調用它們。這樣我不需要爲類似的操作創建兩個單獨的函數。 – anson

如果我理解正確：

var op = "fillRect";  
var args = [ 
    10, 10, 180, 180 
]; 
ctx[op].apply(ctx, args);

例子：http://jsfiddle.net/eZwYQ/

來源

2011-12-01 06:16:27

對，我的問題是'this'作爲'apply（）'的第一個參數。事後明顯的錯誤，但再次感謝您的答案！ – anson

不用擔心;當我嘗試你的例子時，我只是谷歌Chrome瀏覽器拋出的錯誤，並發現另一個討論這個問題的SO問題。 –

您apply方法應該只是罰款：

function rectangle(){ 
    ctx.fillRect.apply(ctx,arguments); 
}

當然，這可以得到更多的「動態」：

function doSomethingWithCanvas(context,action,arg1,arg2/*,...argn*/){ 
    context[action].apply(context,Array.prototype.slice.call(arguments,2)); 
}

而且你可以用同樣的功能來填充矩形，畫一個圓或畫一個簡單的一行：

// simple line 
doSomethingWithCanvas(ctx,'lineTo',10, 100); 

// circle 
doSomethingWithCanvas(ctx,'arc',275, 275, 200, 0, Math.PI*2, true); 

// fillRect 
doSomethingWithCanvas(ctx,'fillRect,10, 10, 180, 180);

PS：通過提供畫布上下文作爲參數，您可以使用此函數在任何畫布上繪製。

來源

2011-12-01 06:25:36

動態調用畫布函數

回答

相關問題