阅读 63

Canvas 绘图中遇到的坑

问题: Invalid div id; div already has a Diagram associated with it.

var parentDiv = document.getElementById('parentDiv');
var mygoChart = document.getElementById('mygoChart');
parentDiv.removeChild(mygoChart);
var div = document.createElement('div');
div.setAttribute('id','mygoChart')
parentDiv.appendChild(div);
复制代码

场景:一个带有步骤条的编辑页面,第一步渲染canvas绘图,第二步做其他操作,...

问题:切换到第二步时,对canvas的父级div使用display:none,隐藏第一步的内容,显示其他内容;再次回到第一步时,canvas的父级div为display:block ,此时canvas渲染为空白内容。

解决方案:在隐藏第一步的canvas时,要保证其父div的宽高不变,可以使用定位到可视区外面的方法来隐藏;

文章分类
前端
文章标签