Javascript 重新附加的Canvas元素保留内容

解析器是一个模块，能够在目标画布上绘制xml。移除原始画布元素并附加干净的画布后，画布将重置，但在进一步重新附加后，画布的内容保持不变

函数集合属性（元素、属性）{
for（属性中的变量键）{
元素setAttribute（key，attrs[key]）；
}
}
var解析器=（函数（）{
var cleancavas=（函数（）{
var canvas=document.createElement（“canvas”）；
设置属性（画布{
“id”：“canvas”，
“风格”：“边框：2件纯黑”，
“宽度”：“200px”，
“高度”：“200px”
});
返回画布；
})();
返回{
parseSVG：函数（数据、目标）{
lastTarget=$（“#”+target）.clone（）；
var canvas=document.getElementById（目标）；
var ctx=canvas.getContext（'2d'）；
var DOMURL=window.URL | | window.webkitURL | | window；
var img=新图像（）；
var svg=新的Blob（[data]{
键入：“image/svg+xml；charset=utf-8”
});
var url=DOMURL.createObjectURL（svg）；
img.onload=函数（）{
ctx.drawImage（img，0,0）；
revokeObjectURL（url）；
}
img.src=url；
var ctx=canvas.getContext（'2d'）；
var DOMURL=window.URL | | window.webkitURL | | window；
var img=新图像（）；
var svg=新的Blob（[data]{
键入：“image/svg+xml；charset=utf-8”
});
var url=DOMURL.createObjectURL（svg）；
img.onload=函数（）{
ctx.drawImage（img，0,0）；
revokeObjectURL（url）；
}
img.src=url；
},
clearCanvas:function（）{
document.body.removeChild（document.getElementById（“canvas”））；
document.body.appendChild（cleancavas）；
}
}
})();
//在控制台中尝试：
var数据=
'' +
'' +
'' +
“废话”+
'' +
'' +
'';
//正常工作
Parser.parseSVG（数据，“画布”）；
clearCanvas（）；
//不能正常工作
Parser.parseSVG（数据，“画布”）；
clearCanvas（）
cleanCanvas
在任何地方都是相同的引用，具有相同的上下文。这意味着：

// after appending cleanCanvas to body

alert(cleanCanvas === document.getElementById('canvas'));

/* --> true */

您可以将
cleancavas
改为一个函数，这样您就可以通过调用它来重新生成它

var getCleanCanvas = function() {
    var canvas = document.createElement("canvas");

    canvas.id = 'canvas';
    canvas.style.border = '2px solid black';

    setAttributes(canvas, {
        "width": "200px",
        "height": "200px"
    });

    return canvas;
};

现在：

cleanCanvas
在任何地方都是相同的引用，具有相同的上下文。这意味着：

// after appending cleanCanvas to body

alert(cleanCanvas === document.getElementById('canvas'));

/* --> true */

您可以将
cleancavas
改为一个函数，这样您就可以通过调用它来重新生成它

var getCleanCanvas = function() {
    var canvas = document.createElement("canvas");

    canvas.id = 'canvas';
    canvas.style.border = '2px solid black';

    setAttributes(canvas, {
        "width": "200px",
        "height": "200px"
    });

    return canvas;
};

现在：

好吧这很好，但是属性不适合您定义的方式，但是使用setAttribute设置它们是可以的。所以我的cleanCanvas不是一个函数，它只是计算了匿名函数的返回值，对吗？这可能会引起我的混淆。@toboR\u rM确切地说，但是属性不应该以这种方式定义，一些旧浏览器有时不处理它们，它们必须用默认设置器定义，如
id
，
width
，等等。。。在
HTMLElement（）
中。Canvas可以在现代浏览器中使用。这很好，但是属性不适合您定义的方式，但是使用setAttribute设置它们是可以的。所以我的cleanCanvas不是一个函数，它只是计算了匿名函数的返回值，对吗？这可能会引起我的混淆。@toboR\u rM确切地说，但是属性不应该以这种方式定义，一些旧浏览器有时不处理它们，它们必须用默认设置器定义，如
id
，
width
，等等。。。在
HTMLElement（）
中。不过，Canvas在现代浏览器中也可以使用。