如何修复“ctx.clearRect 不是函数”答案

【问题标题】：How to fix ' ctx.clearRect is not a function'如何修复“ctx.clearRect 不是函数”
【发布时间】：2019-06-11 17:13:27
【问题描述】：

我正在尝试制作一个可以帮助我显示圆形进度条的功能。但我有一个问题：未捕获的 TypeError：ctx.clearRect 不是函数

function generateSubject(subjectNumber ,name, firstAttestation, secondAttestation, rating, semester) {

    let ratingBar = document.getElementById('rating-bar');
    let canvasBar = document.createElement('canvas');
    canvasBar.className = 'round-progress-bars ' + subjectNumber;
    canvasBar.style.width = '70px';
    canvasBar.style.height = '70px';
    ratingBar.appendChild(canvasBar);

    return canvasBar

}

let bars = [];
bars.push(generateSubject(1));

let rating1 = [80];
roundAnimation(bars, rating1);

function roundAnimation(bars, rating) {

    for (let i = 0; i < bars.length; i++) {
        let sim;
        let ctx = bars[i];
        let al = [];
        for (let j = 0; j < bars.length; j++) {
            al.push(0);
        }
        let start = 4.72;
        let cw = 70;
        let ch = 70;
        let diff;

        function progressSim(){
            console.log(i);
            diff = ((al[i] / 100) * Math.PI*2*10).toFixed(2);
            ctx.clearRect(0, 0, cw, ch);
            ctx.lineWidth = 10;
            ctx.fillStyle = '#2F80ED';
            ctx.strokeStyle = "#2F80ED";
            ctx.textAlign = 'center';
            ctx.font = '18px Roboto';
            ctx.fillText(al[i], cw*.5, ch*.5+5, cw);
            ctx.beginPath();
            ctx.arc(35, 35, 30, start, diff/10+start, false);
            ctx.stroke();
            if(al[i] >= rating[i]){
                clearTimeout(sim);
                // Add scripting here that will run when progress completes
            }
            else {
                al[i]++;

            }
        }
        sim = setInterval(progressSim, 40);
    }
}

&lt;div id="rating-bar"&gt;&lt;/div&gt;

我上面描述的第一个函数生成元素画布。

第二个函数为圆形进度条绘制动画。

它在里面并且有一个错误： index.js:86 未捕获类型错误：ctx.clearRect 不是函数在progressSim

我该如何解决这个问题？

【问题讨论】：

标签： javascript

【解决方案1】：

您正在尝试直接在您的 canvas 上调用 context 方法，而不是在画布的上下文中。您需要先使用canvas 的.getContext("2d") 方法，然后在从该调用返回的上下文中调用这些方法。

function generateSubject(subjectNumber ,name, firstAttestation, secondAttestation, rating, semester) {

    let ratingBar = document.getElementById('rating-bar');
    let canvasBar = document.createElement('canvas');
    canvasBar.className = 'round-progress-bars ' + subjectNumber;
    canvasBar.style.width = '70px';
    canvasBar.style.height = '70px';
    ratingBar.appendChild(canvasBar);

    return canvasBar

}

let bars = [];
bars.push(generateSubject(1));

let rating1 = [80];
roundAnimation(bars, rating1);

function roundAnimation(bars, rating) {

    for (let i = 0; i < bars.length; i++) {
        let sim;
        let ctx = bars[i].getContext("2d");  // <-- Get the canvas context
        let al = [];
        for (let j = 0; j < bars.length; j++) {
            al.push(0);
        }
        let start = 4.72;
        let cw = 70;
        let ch = 70;
        let diff;

        function progressSim(){
            console.log(i);
            diff = ((al[i] / 100) * Math.PI*2*10).toFixed(2);
            ctx.clearRect(0, 0, cw, ch);
            ctx.lineWidth = 10;
            ctx.fillStyle = '#2F80ED';
            ctx.strokeStyle = "#2F80ED";
            ctx.textAlign = 'center';
            ctx.font = '18px Roboto';
            ctx.fillText(al[i], cw*.5, ch*.5+5, cw);
            ctx.beginPath();
            ctx.arc(35, 35, 30, start, diff/10+start, false);
            ctx.stroke();
            if(al[i] >= rating[i]){
                clearTimeout(sim);
                // Add scripting here that will run when progress completes
            }
            else {
                al[i]++;

            }
        }
        sim = setInterval(progressSim, 40);
    }
}

&lt;div id="rating-bar"&gt;&lt;/div&gt;

【讨论】：