Question

有没有办法使用apply（）或类似方法调用canvas函数，以动态调用canvas方法或能够传递一组参数？

我正在寻找这种效果 context.fillRect.apply(this,args);

Answer 1

如果我理解正确的话：

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

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

Answer 2

您的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：通过提供画布上下文作为参数，您可以使用此函数在任何画布上绘制。

动态调用Canvas函数

2 个答案: