重绘或删除现有画布并创建具有已修改内容的新画布

Posted 2021-03-28

我试图删除现有的画布并使用修改后的内容（旧的画布）创建一个新的画布。

以下是我尝试过的代码。

/ *识别div父级内的Canvas子项* /

var c = document.getElementById("myCanvasDiv"),
canv = '',
cv = '';

for (i = 0; i < c.childElementCount; i++) {
        console.log(c.children[i].nodeName);
        if (c.children[i].nodeName == "CANVAS") {
        //console.log(c.children[i].getContext('2d'));
            canv = c.children[i];
            cv = c.children[i].getContext('2d');
        }
}



var new_cv = cv
var items = new_cv.canvas.aa.nodes.bi.ud

var keys = []

/ *检索键* /

    for (var i in items){
    //console.log(items[i].value.Zd["key"]);
    keys.push(i + "|" +items[i].value.Zd["key"]);
}

/ *修改内容* /

  for (var i in items){
    var strVal = items[i].value.Zd["key"];
    //console.log(items[i].value.Zd["key"]);
    for (var j in keys){
        if(items[i].value.Zd["key"] && items[i].value.Zd["key"].substring(0,items[i].value.Zd["key"].length-1) == keys[j].split("|")[1]){
            items[i].value.Zd["key"] = keys[j].split("|")[1];
        }
    }   
    console.log(strVal + "----->" + items[i].value.Zd["key"]);
}

/ *试图重置画布内容* /

for (i = 0; i < c.childElementCount; i++) {
        if (c.children[i].nodeName == "CANVAS") {
            /*c.removeChild(c.children[i]);
            var newcanvas = document.createElement("canvas");
            newcanvas.id="canvas1";
            newcanvas.getContext = new_cv;
            c.appendChild(newcanvas);*/
            //cHeight = c.children[i].height;
            //cWidth = c.children[i].width;
            //cv.clearRect(0,0,c.children[i].width,c.children[i].height);
            //c.children[i] = new_cv;
            //cv.setContext(new_cv);

            canv.getContext = new_cv;
            console.log(cv);
        }
}

有什么方法可以实现这一点。

提前致谢。