如何重绘画布（每 250 毫秒）而不在每次重绘之间闪烁？

Question

我写了一个函数，它根据你指定的大小（以度为单位）抽取一片披萨

function drawProgress(degs){

var canvas = document.getElementById('progress');
var context = canvas.getContext('2d');

context.globalAlpha=1;                
var img = new Image();
img.onload = function(){

    context.beginPath();
    context.arc(canvas.width/2,canvas.height/2, canvas.height/2, 0, degs * (-Math.PI/180), true);
    context.lineTo(canvas.width/2, canvas.height/2);
    context.clip();                        
    context.drawImage(img, 0, 0, canvas.width,canvas.width);
}                           
img.src = 'pizza.png';

}

当我尝试每 250 毫秒调用一次此函数时，第一次绘制后进度不会更新。

function runsEvery250ms(percent){
    drawProgress(3.6 * percent);
}

每次调用drawProgress(degs) 时，我需要对代码进行哪些更改才能使画布重绘？是否可以在不导致披萨闪烁的情况下执行重绘？

Answer 1

使用context.clearRect(0, 0, canvas.width, canvas.height);并缓存你的图片，不要每次刷新都重新加载

更新：不知道这是否可行，未经测试，并且自从我使用画布以来已经有一段时间了，但尝试一下

var canvas = document.getElementById('progress');
var context = canvas.getContext('2d');
var img = new Image();
var imgLoaded = false;
img.src = 'pizza.png';

img.onload = function(){
  imgLoaded = true;
}

function drawProgress(degs){
    context.save();
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.globalAlpha=1;                

    context.beginPath();
    context.arc(canvas.width/2,canvas.height/2, canvas.height/2, 0, degs * (-Math.PI/180), true);
    context.lineTo(canvas.width/2, canvas.height/2);
    context.clip();                        
    if (imgLoaded) context.drawImage(img, 0, 0, canvas.width,canvas.width);
    context.restore();
}