清楚Chart.js的画布缓存

最新推荐文章于 2025-07-23 11:07:57 发布

转载最新推荐文章于 2025-07-23 11:07:57 发布 · 1k 阅读

本文介绍了一种在HTML5 Canvas上清除旧绘图并重新绘制饼图的方法，通过完全移除并重新创建DOM对象来解决clearRect()等方法无法彻底清除画布的问题。提供了完整的代码示例，包括HTML结构、JavaScript函数以及使用Chart.js库实现的饼图绘制。

一、直接移除DOM对象方式

1.原因

clearRect()等canvas方法清空失败

2.方法

移除dom对象的方式

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

二、完整代码

1.html

<div id="container">
    <canvas id="canvas"></canvas>
</div>1
2
3

2.javascript

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

3.chart.js画图方法

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

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
        }
    }
};1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40