多幅画布不起作用

时间:2014-05-20 18:01:19

标签: javascript html5 html5-canvas

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

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);
});

为什么只有一个画布出现?

1 个答案:

答案 0 :(得分: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,你也可以使用标准createElementappendChild

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