从数组中绘制Javascript画布

我目前正在创建一个族谱树，在从父节点创建子节点时遇到了一些问题。现在我正在画

topPerson.draw（上下文）

which=父节点，然后调用for循环遍历Partnership.js文件中存在的子节点数组，该数组是

this.mChildren=new array（）

我试图做的是在数组中循环，并在父节点下以与父节点相同的样式绘制每个子节点（以矩形为边框，以图像为中心，并在下面命名）

Person.js用于将画布原点设置为中心，绘制矩形，写入包含节点名称的文本，然后添加节点图像：

Person.prototype.draw = function (context) {
    //draw rectangle
    var c = document.getElementById("canvas");
    var context = c.getContext("2d");
    context.scale(1, 1);
    context.rect(canvas.width * 0.5, canvas.height * 0.5,160,210);
    context.fillStyle = '#FFFFFF';
    context.fill();
    context.stroke();
    context.fillStyle = '#000000';
    context.font = "30px Arial";
    context.fillText(this.getName(), canvas.width * 0.5 + 15, canvas.height * 0.5 + 190);
    //get image and draw
    context.drawImage(this.getImage(), canvas.width * 0.5 + 5, canvas.height * 0.5 + 5);

我尝试创建一个如下所示的数组：

for (i = 0; < mChildren.length; i++){
        img = new Image();
        img.src = mChildren[i];
        img.onLoad = (function(img, i){
            return function () {
                context.drawImage(img, i*img.width, i*img.height);
            }
        })(img, i)
    }

for（i=0；
因此，使用循环遍历数组并调用
。在每个数组上绘制
。只需避免清除画布，只需在方法中绘制项即可。@SpencerWieczorek我正在执行for循环，方法是说
for（i=0；
然后有一组函数，比如getChild、numChilds和addChild，然后我会做
getChild.draw
？我不是100%确定你想做什么，但是如果你试图迭代数组并绘制树，那么我建议使用D3这里是我使用D3创建的堆结构。如果你想创建什么与此类似，我可以通过编写一个修改后的示例来帮助您更好地适应您的设计。@Pete感谢链接Pete，但我必须使用画布和数组来创建一个包含来自原始节点的子节点和伙伴节点的族谱，这基本上就是我要做的。因此我有一个我需要遍历的孩子然后在画布上绘制。@道格拉斯，这就是D3所做的。它使用一个画布，允许创建和添加SVG元素。绘制一个简单的布局模型，我会帮助你。另外，你在数组计划中如何决定层次结构？因此，使用循环遍历数组并调用
。绘制
每一个。只要避免清除画布，只需在方法中绘制项目即可。@SpencerWieczorek我在做一个for循环，说的是
for（i=0；
然后有一组函数，比如getChild、numChilds和addChild，然后我会做
getChild.draw
？我不是100%确定你想做什么，但是如果你试图迭代数组并绘制树，那么我建议使用D3这里是我使用D3创建的堆结构。如果你想创建什么与此类似，我可以通过编写一个修改后的示例来帮助您更好地适应您的设计。@Pete感谢链接Pete，但我必须使用画布和数组来创建一个包含来自原始节点的子节点和伙伴节点的族谱，这基本上就是我要做的。因此我有一个我需要遍历的子对象然后绘制到画布上。@Douglas，这就是D3所做的。它使用一个画布来创建和添加SVG元素。绘制一个简单的布局模型，我将帮助您。另外，您在阵列计划中如何决定层次结构？