HTML5画布 - 使用一组命令通过上下文绘制？

Question

我想要做类似下面的...

// commmands - context commands to build primitives. 
// See comments in loop for example. 
function DrawToCanvas(commands, height, width){ 

    var canvas = document.createElement("canvas"); 
    canvas.width = inWidth; 
    canvas.height = inHeight; 
    var context = canvas.getContext("2d")  

    for(var i = 0; i < commands.length; i++){ 

     // Do Stuff like 
     // context.beginPath(); 
     // context.moveTo(25,25); 
     // context.lineTo(105,25); 
     // context.lineTo(25,105); 
     // context.fill(); 

     // context.commands[i] <- Something like this 
    } 

    return canvas; 
} 

有一些相当于context.commands [I]，等等

我就在想，如果这是不可能的，另一个选择是传递一个回调函数。像...

function MakeALine(){ 

var newLineAsCanvas = DrawToCanvas(100,100,function(context){ 
    context.beginPath(); 
    context.moveTo(25,25); 
    // etc... 
} 
} 

什么是最好的方式来做这样的事情？

Answer 1

我有点困惑，你在追求什么，但javascript call命令可能会有所帮助。

var commands = []; 
commands.push(function(context) { 
    context.beginPath(); 
}); 
commands.push(function(context) { 
    context.moveTo(25,25); 
    context.lineTo(105,25); 
    context.lineTo(25,105); 
}); 
commands.push(function(context) { 
    context.fill(); 
}); 
document.body.appendChild(DrawToCanvas(commands, 300, 300)); 

function DrawToCanvas(commands, height, width){ 

    var canvas = document.createElement("canvas"); 
    canvas.width = width; 
    canvas.height = height; 
    var context = canvas.getContext("2d") 

    for(var i = 0; i < commands.length; i++){ 
     commands[i].call(this, context); 
    } 

    return canvas; 
}