javascript - 如何修复“ctx.clearRect 不是函数”

Question

我正在尝试制作一个可以帮助我显示圆形进度条的功能。但我遇到了一个问题：未捕获的 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);
    }
}

<div id="rating-bar"></div>

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

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

它在里面并且有一个错误： index.js:86 Uncaught TypeError: ctx.clearRect is not a function at progressSim

我怎么解决这个问题？

标签： javascript

Answer 1

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

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);
    }
}

<div id="rating-bar"></div>