HTML5 Canvas-使用命令数组通过上下文绘制吗？

Question

I want to do something like the following...

// 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;
}

Is there some equivalent to context.commands[i], etc...

I was thinking if this wasn't possible, another option would be to pass a callback function instead. Something like...

function MakeALine(){

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

What would be the best way to do something like this?

Answer 1

I'm a little confused what you're after, but the javascript call command is likely to help.

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;
}