在 window 调整大小时清除 canvas

Question

我正在尝试重置我的进度环，它在调整大小时用 canvas 绘制。

目前，当我调整 window 大小时，函数又如预期的那样运行，但不是 canvas 被重置，而是在同一个 canvas，请看下面的截图：

我在此处的答案中找到了 clearRect()：How to clear the canvas for redrawing 和类似的解决方案，但它似乎无法解决我的问题。

请使用代码找到我的codepen：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.width、canvas.height) 而不是 ctx.canvas.width、ctx.canvas.height

来指定 canvas 大小

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

2。间隔定时器使用问题

如果在 setInterval() 之后再次调用 progressRing() 而没有 clearInterval()，例如，由于调整大小，它将继续到运行，之前的间隔执行仍然存在。这将导致环被绘制两次、三次甚至更多。

将 var int = 0; 放在函数外部。这首先将 int 初始化为 0。

并将var int = setInterval(修改为int = setInterval(

然后把下面的代码放在progressRing()

的开头

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

并在已经存在的 clearInterval() 调用之后立即放置 int = 0;。

在 window 调整大小时清除 canvas

Clear canvas on window resize

javascript

resize

canvas