一、直接移除DOM对象方式

原因

clearRect()等canvas方法清空失败

方法

移除dom对象的方式

$('#canvas').remove();
$('#container').append('<canvas id="canvas"></canvas>');

二、完整代码

html

<div id="container"><canvas id="canvas"></canvas>
</div>

javascript

/***擦除canvas画布*/
function clearCanvas(){$('#canvas').remove();$('#container').append('<canvas id="canvas"></canvas>');container=document.getElementById("canvas");context=container.getContext("2d");
}

chart.js画图方法

function pieChart(){clearCanvas();window.myPie = new Chart(context, config);
}

var config = {type: 'pie',data: {datasets: [{data: [40,30,20,10],backgroundColor: [window.chartColors.red,window.chartColors.orange,window.chartColors.green,window.chartColors.blue,],label: 'Dataset 1'}],labels: ["优秀","良好","中等","偏差"]},options: {responsive: true,legend: {position: 'top',},title: {display: true,text: '饼状图'},animation: {animateScale: true,animateRotate: true}}
};

三、效果

Chart.js清空canvas画布 clearRect()等canvas方法擦除失败（附完整代码）相关推荐

CSS3 渐变新特性和HTML5 Canvas画布背景渐变实现方法详解
CSS3 渐变新特性和HTML5 Canvas画布背景渐变实现方法详解大家好,又见面了,感觉我上一篇博客对部分同学都挺有帮助的,于是我决定继续写下去,会继续的解析知识点让大家更容易理解,希望能给大家 ...
Three.js实例详解___旋转的精灵女孩(附完整代码和资源)（一）
Three.js实例详解___旋转的精灵女孩(附完整代码和资源)(一) 本文目录: 一.[旋转的精灵女孩]案例运行效果二.Three.js简介三.Three.js代码正常运行显示条件 (1)不载入 ...
Three.js实例详解___旋转的精灵女孩(附完整代码和资源)（二）
Three.js实例详解___旋转的精灵女孩(附完整代码和资源)(二) 本篇目录: 五.实例中所使用的代码语法详细解释 (1).构建一个三维空间场景 (2).选择一个透视投影相机作为观察点 (a).创 ...
Three.js实例详解___旋转的精灵女孩(附完整代码和资源)（三）
Three.js实例详解___旋转的精灵女孩(附完整代码和资源)(三) 本篇目录: 六.完整构建整个[旋转的精灵女孩]实例 (1).新建.启动webGL工程空间 (2).构建项目的目录层次结构 (2. ...
html页面数字滚动,Vue.js大屏可视化数据数字滚动翻转跳转效果（通俗易懂附完整代码）...
原文:Vue.js大屏可视化数据数字滚动翻转跳转效果(通俗易懂附完整代码) 大屏数字滚动翻转效果来源于最近工作中element后台管理页面一张大屏的UI图,该UI图上有一个模块需要有数字往上翻动的效果 ...
微信小程序canvas画布不清晰解决方法
绘制的图片,文字等十分模糊添加以下代码,通过设置分辨率来解决 const dpr = wx.getSystemInfoSync().pixelRatiocanvas.width = res[0].w ...
HTML5中canvas画布属性,html5 Canvas之画布合成的属性总结
首先解释一下合成的含义,合成是指如何精细控制画布上面的对象的透明度和分层效果.其中控制Canvas画布合成的操作的两个属性分别是:globalAlpha和globalCompositeOperatio ...
网页设计html最简单水印方法,前端canvas水印快速制作（附完整代码)
两种水印效果如图: 原理解析: 图一斜纹类:创建一个和页面一样大的画布,根据页面大小以及倾斜角度大致铺满水印文字,最后转化为一张图片设为背景图二倾斜类:将文字倾斜后转化为图片,然后设置背景图片rep ...
js清除HTML的input数据,js 清空 input file 的值的方法
今天在做一个利用 JS 上传本地图片的小功能时,需要在文件上传成功后,清空 file 类型的 input 元素中所选择的本地文件,以方便二次功能的调用!而这篇文章飞鸟慕鱼博客就来说一说,如果利用 js ...

Chart.js清空canvas画布 clearRect()等canvas方法擦除失败（附完整代码）

Chart.js清空canvas画布 clearRect等canvas方法擦除失败

一、直接移除DOM对象方式

原因

方法

二、完整代码

html

javascript

chart.js画图方法

三、效果

Chart.js清空canvas画布 clearRect()等canvas方法擦除失败（附完整代码）相关推荐

最新文章

热门文章