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

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

1 个答案: