多个画布不起作用

Question

我试图动态生成多个画布，当我创建一个新画布时，前一个消失了。 请参见此处的示例：

http://jsfiddle.net/adrianh/5jspv/4/

这是JavaScript代码：

var circleCount = 0;
function circleRect(rect)
{
    var diameter = Math.sqrt(rect.width*rect.width+rect.height*rect.height);
    var cx = (rect.right + rect.left)/2;
    var cy = (rect.top + rect.bottom)/2;
    var left = Math.floor(cx - diameter/2);
    var top  = Math.floor(cy - diameter/2);
    diameter = Math.floor(diameter);
    var html = "<canvas id='circleCanvas"+circleCount+"' "+
        "width='"+(diameter+2)+"' "+
        "height='"+(diameter+2)+"' "+
        "style='"+
        "position:absolute;"+
        "z-index:0;"+
        "left:"+(left-1)+"px;"+
        "top:"+(top-1)+"px;"+
        //"border:1px solid;"+
        "' />";
    alert(html);
    var container = document.getElementById("circles");
    container.innerHTML += html;

    var c=document.getElementById("circleCanvas"+circleCount);
    var ctx=c.getContext("2d");
    ctx.beginPath();
    ctx.arc(diameter/2+1,diameter/2+1,diameter/2,0,2*Math.PI);
    ctx.stroke();
    ++circleCount;
}

$(".circled").each(function(i, obj) {
    var rect = obj.getBoundingClientRect();
    circleRect(rect);
});

为什么只显示一张画布？

Answer 1

操作DOM而不是尝试使用innerHTML内联操作会更加可靠。 这段代码使用jQuery的DOM操作方法 ：

var circleCount = 0;
function circleRect(rect)
{
    var diameter = Math.sqrt(rect.width*rect.width+rect.height*rect.height);
    var cx = (rect.right + rect.left)/2;
    var cy = (rect.top + rect.bottom)/2;
    var left = Math.floor(cx - diameter/2);
    var top  = Math.floor(cy - diameter/2);
    diameter = Math.floor(diameter);
    var html = $("<canvas id='circleCanvas"+circleCount+"' "+
        "width='"+(diameter+2)+"' "+
        "height='"+(diameter+2)+"' "+
        "style='"+
        "position:absolute;"+
        "z-index:0;"+
        "left:"+(left-1)+"px;"+
        "top:"+(top-1)+"px;"+
        "' />");
    $("#circles").append(html);

    var ctx=html[0].getContext("2d");
    ctx.beginPath();
    ctx.arc(diameter/2+1,diameter/2+1,diameter/2,0,2*Math.PI);
    ctx.stroke();
    ++circleCount;
}

如果您确实不需要jQuery，也可以使用标准的createElement和appendChild 。

innerHTML属性有很多缺点 ，尽管我没有找到关于不使用+= ，但是insertAdjacentHTML存在的事实似乎表明您不应该真正期望它能很好地工作。 （在此之前忘记了这一点）在这种情况下，正如您在评论中正确推测的那样，当对innerHTML的分配发生时，您绘制的canvas将替换为新的canvas 。