javascript - 在页面上放大两次后 Canvas 覆盖消失

Question

所以我遇到了一个我不知道如何修复的奇怪错误。当我在我的网站上单击一个名为“放大”的按钮时，它会启动一个覆盖层，并且在内部有一个加载蛋白质结构的 Canvas 。但是，当我单击关闭按钮并尝试再次放大它时，它什么也没加载，我似乎无法弄清楚为什么。

示例 HTML

<!-- Expanded Canvas-->
                    <div id= "myNav" class ="overlay">
                            <a href="javascript:void[0]" class = "closebtn" onClick="closeNav()">X</a>
                            <div class = "overlay-content">
                                <div class = "fixed">
                                </div>
                                <div id = "viewer2">
                                        <canvas id = "expandedCanvas"></canvas>     
                                </div>
                    </div>  
                </div>
            </div>
<a  id = "expandImage" style = "cursor:pointer">[Enlarge]</a>
<script>

    function closeNav() {
        document.getElementById("myNav").style.width = "0%";    
        document.getElementById("sequence-label").style.display = "none";
        document.getElementById("picked-atom-name").style.display = "none";
        document.getElementById("proteinAlbum").style.display = "none";
    }

</script>

JS

function expandImage() {

expandImageButton = true;

    //Start off as default for both the buttons not showing 
show("antibodyOn", false);
show("antibodyOff", false);

//Reset the width 
document.getElementById("myNav").style.width = "100%";
viewer.requestRedraw();

viewer = pv.Viewer(document.getElementById('viewer2'), { 
    antialias : true, fog : true,
    outline : true, quality : 'high', style : 'phong',
    selectionColor : 'white', transparency : 'screendoor', 
    background : '#111215', animateTime: 500, doubleClick : null,

});

//Fit to the nav bar
viewer.fitParent();

this.value = "";
this.blur();

// Same principle as the loadFromPdb
var XHR = new XMLHttpRequest();
XHR.open("GET", urlPdb, true);
XHR.send();
XHR.onreadystatechange = function () {
    if (XHR.readyState === 4) {
        if (XHR.status === 200 || XHR.status === 0) {
         staticProteinLabel = XHR.responseText.slice(0, XHR.responseText.indexOf("\n")).substr(62, 4).trim();
         var canvasStaticLabel = document.getElementById('static-label');
         canvasStaticLabel.textContent = staticProteinLabel;
         typeOfProtein = XHR.responseText.slice(0, XHR.responseText.indexOf("\n")).substr(10, 26).trim();
         var result = XHR.responseText;
         var allLines = result.split("\n");
         var lineTwo = String(allLines[1]);
         alert(lineTwo);
         var antibodyText = "ANTIBODY";
            if (typeOfProtein === "COMPLEX (ANTIBODY-ANTIGEN)") {
                isAntibody = true;
                anitbodyOn();
                }
            else if (lineTwo.indexOf(antibodyText) ) {
                isAntibody = true;
                antibodyOn();
            }
          }
        }
    }

io.fetchPdb(urlPdb, function(s) {
  structure = s;
  mol.assignHelixSheet(structure);
  cartoon();
  viewer.autoZoom();
  });

}

所以我想知道这是否只是宽度变化的问题，它无法再次加载查看器以及如何修复它？

Answer 1

所以我能够弄清楚。 Canvas 内的数据需要销毁，所以我写了一个小函数来删除数据并清除 Canvas ，以便重新加载。