多个画布不起作用答案

【问题标题】：multiple canvases are not working多个画布不起作用
【发布时间】：2014-05-21 06:44:08
【问题描述】：

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

这里是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);
});

为什么只显示一个画布？

【问题讨论】：

在你的代码运行后，你的 jsFiddle 中有两个 circled 类的元素，有两个 canvas 元素。您希望发生什么没有发生的事情？
我希望每个动态生成的、唯一标识的画布在执行结束时都可见。不仅仅是最后一个创建的。
jsfiddle.net/robertc/5jspv/5
啊，我。所以我所做的是每次我添加一个新的，我用空白的替换旧的，因为你的例子实际上没有触及原始画布？是这样吗？ jquery是如何做到的？虽然这很奇怪，因为原始大小没有更改为默认值。它是如何工作的？
在我的回答中提供了一堆链接，希望它们能帮助你快速上手。

标签： javascript html html5-canvas

【解决方案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 存在这一事实似乎表明你不应该真的期望它能够工作出色地。（之前忘记了）在这种情况下，正如您在评论中正确推测的那样，当分配给 innerHTML 时，您绘制的 canvas 将被新的替换。

【讨论】：

DOM Scripting 的一大优势是通过简单地使用 var reference=document.createElement ("..."); 创建一个元素来获得快速参考。 innerHTML 很快，但是如果你设置一个 id 然后用这个 id 连接 Javascript，速度优势就没有了，这就像在房子周围跑了几圈然后打开门，而不是直接走到门口打开它。