[英]Using a JavaScript while loop to draw an array of images to HTML5 canvas
[英]HTML5 Canvas - Using an array of commands to draw via context?
我想做以下事情...
// 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...
}
}
做這樣的事情的最好方法是什么?
我對您的追求感到有些困惑,但是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;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.