JavaScript Canvas-重新調整窗口大小

Question

http://jsfiddle.net/27WVW/1/

我有一個使用SetInterval設置背景入口動畫的畫布元素。

var c=document.getElementById("theCircle")

function drawCircle(end=2*Math.PI){

height = window.innerHeight
width = window.innerWidth

var ctx=c.getContext("2d");

ctx.beginPath();
ctx.arc(width/2,height/2,radius,0,end,true);
ctx.lineWidth=end/5;
ctx.closePath();
ctx.stroke();

}


function counter(start,finish,speed){

var i = start

var animation = setInterval(function(){
    i += speed
    if(i>=finish){clearInterval(animation)}
    drawCircle(i);  
    }, 20)
}

counter(0.0,2*Math.PI,0.05)

在調整窗口大小時，將調整畫布元素的大小以適合窗口，以使其始終充滿頁面。

window.addEventListener('resize',posFix,false);

function posFix(){

c.height = window.innerHeight
c.width = window.innerWidth

drawCircle();

}

調整畫布元素的大小后，內部的圖形將被刪除。 如您所見，我在調整大小時要求重繪，但似乎無法正常啟動。

我想念什么？

Answer 1

如評論中所述，解決方案是清除resize事件中的動畫間隔，然后重新啟動動畫。

var c = document.getElementById("theCircle"),
    radius = 800;

posFix();

window.addEventListener('resize', posFix, false);

function posFix() {

    c.height = window.innerHeight
    c.width = window.innerWidth

    clearInterval(animation);
    counter(0.0, 2 * Math.PI, 0.05)

}


function drawCircle(end = 2 * Math.PI) {

    height = window.innerHeight
    width = window.innerWidth

    var ctx = c.getContext("2d");
    ctx.beginPath();
    ctx.arc(width / 2, height / 2, radius, 0, end, true);
    ctx.lineWidth = end / 5;
    ctx.closePath();
    ctx.stroke();
}

var animation;

function counter(start, finish, speed) {

    var i = start
    animation = setInterval(function () {

        i += speed

        if (i >= finish) {
            clearInterval(animation);
        }

        drawCircle(i);

    }, 20);
}

jsfiddle： http : //jsfiddle.net/27WVW/4/