Question

我试图动态生成多个画布，当我创建一个新画布时，前一个画布消失了。请看这里的例子：

以下是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's DOM manipulation methods：

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 property有a number of drawbacks，虽然我没有找到关于不使用+=的具体内容，insertAdjacentHTML存在的事实似乎表明你不应该真的期望它运作良好。（在此之前忘记了这一点）在这种情况下，正如您在评论中正确推测的那样，当您canvas的作业发生时，您所使用的innerHTML将替换为新的{{1}}。

多幅画布不起作用

1 个答案: