多個畫布不起作用

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 。