在 window 調整大小時清除 canvas

Question

我正在嘗試重置我的進度環，它在調整大小時用 canvas 繪制。

目前，當我調整 window 的大小時，function 會按預期再次運行，但不是重置 canvas，而是在同一個 canvas 中繪制另一個進度環，請參見下面的屏幕截圖：

我在此處的答案中找到了 clearRect()： How to clear the canvas for redrawing和類似的解決方案，但它似乎無法解決我的問題。

請使用代碼找到我的代碼筆：https://codepen.io/MayhemBliz/pen/OJQyLbN

Javascript：

// Progress ring
function progressRing() {
    
    const percentageRings = document.querySelectorAll('.percentage-ring');

    for (const percentageRing of Array.from(percentageRings)) {

        console.log(percentageRing.offsetWidth)

        var percentageRingOptions = {
            percent: percentageRing.dataset.percent,
            size: percentageRing.offsetWidth,
            lineWidth: 30,
            rotate: 0
        }

        var canvas = document.querySelector('.percentage-ring canvas');
        var span = document.querySelector('.percentage-ring span');

        span.textContent = percentageRingOptions.percent + '%';

        if (typeof (G_vmlCanvasManager) !== 'undefined') {
            G_vmlCanvasManager.initElement(canvas);
        }

        var ctx = canvas.getContext('2d');
    
    //clear canvas for resize
        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
        ctx.beginPath();
    // end clear canvas
    
        canvas.width = canvas.height = percentageRingOptions.size;

        percentageRing.appendChild(span);
        percentageRing.appendChild(canvas);

        ctx.translate(percentageRingOptions.size / 2, percentageRingOptions.size / 2); // change center
        ctx.rotate((-1 / 2 + percentageRingOptions.rotate / 180) * Math.PI); // rotate -90 deg

        //imd = ctx.getImageData(0, 0, 240, 240);
        var radius = (percentageRingOptions.size - percentageRingOptions.lineWidth) / 2;

        var drawCircle = function (color, lineWidth, percent) {
            percent = Math.min(Math.max(0, percent || 1), 1);
            ctx.beginPath();
            ctx.arc(0, 0, radius, 0, Math.PI * 2 * percent, false);
            ctx.strokeStyle = color;
            //ctx.lineCap = 'round'; // butt, round or square
            ctx.lineWidth = lineWidth
            ctx.stroke();
        };

        drawCircle('#efefef', percentageRingOptions.lineWidth, 100 / 100);

        var i = 0; var int = setInterval(function () {
            i++;
            drawCircle('#555555', percentageRingOptions.lineWidth, i / 100);
            span.textContent = i + "%";
            if (i >= percentageRingOptions.percent) {
                clearInterval(int);
            }
        }, 50);

    }
}

window.addEventListener('load', progressRing);
window.addEventListener('resize', progressRing);

HTML：

<div class="percentage-ring" data-percent="88">
  <span>88%</span>
  <canvas></canvas>
</div>

非常感謝您的幫助。

提前致謝

Answer 1

1.清晰尺寸問題

var canvas = document.querySelector('.percentage-ring canvas');

var ctx = canvas.getContext('2d');

ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

您必須指定 canvas 大小（ canvas.width ， canvas.height ）而不是ctx.canvas.width ， ctx.canvas.height

ctx.clearRect(0, 0, canvas.width, canvas.height);

2.間隔定時器使用問題

如果在沒有clearInterval() ) 的情況下在setInterval()之后再次調用progressRing() )，例如，由於調整大小，它將繼續運行，之前的間隔執行仍然存在。 這將導致環被繪制兩次、三次甚至更多。

將var int = 0; 外部功能。 這首先將int初始化為 0。

並將var int = setInterval(修改為int = setInterval(

然后把下面的代碼放在progressRing()的開頭

if (int) {
    clearInterval(int);
    int = 0;
}

並放置int = 0; 在已經存在的clearInterval()調用之后立即執行。