chart.js——有关清空canvas画布内的内容重新绘制的函数

772 阅读1分钟

我在网上整合了几个我查到的有关 清空canvas 的方法

  1. 重设高度可以清空画布,但是我在使用时没有产生效果
var c = document.getElementById("画布canvas的id")
c.height=c.height;

2.给画布上一层色,覆盖掉原来绘制的图案,这个仅适用于清空填充的颜色吧,对制作的图表不起效果

var c = document.getElementById("画布canvas的id")
c.clearRect(0,0,c.width,c.height);

有效办法

//删除原有canvas并创建一个新的
//传入一个通过getElementById获取的画布canvas的id
function clearChartjsCanvas(c){
    //删除对象
    c.remove();
    //生成新对象
    var cdom = document.createElement("canvas");
    //给新对象填入数据
    cdom.setAttribute("id",'Chart_doughnut_fpm');
    cdom.setAttribute("width",'10');
    cdom.style.setProperty("height","10");
    document.getElementById('canvas所在的div的id').appendChild(cdom);
    //获取新对象
    var canvas = document.getElementById("画布canvas的id")
    var ctx = canvas.getContext("2d");
}