javascript - How to redraw canvas (every 250ms) without flickering between each redraw? - Stack Overflow

admin管理员组

文章数量:1221310

I wrote a function that draws out a slice of a pizza based on how big you specify it to be (in degrees)

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';

}

When I try to call this function every 250ms, the progress is not updated after the first draw.

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

What changes do I need to make to the code to get the canvas to redraw each time drawProgress(degs) is called? Is it possible to perform redraws without causing the pizza to flicker?

I wrote a function that draws out a slice of a pizza based on how big you specify it to be (in degrees)

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';

}

When I try to call this function every 250ms, the progress is not updated after the first draw.

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

What changes do I need to make to the code to get the canvas to redraw each time drawProgress(degs) is called? Is it possible to perform redraws without causing the pizza to flicker?

• javascript
• html
• canvas
• html5-canvas

Share Improve this question Follow asked Mar 1, 2012 at 19:06 user784637user784637 16.1k3333 gold badges9696 silver badges159159 bronze badges 4

• It's been a while since I touched canvas, I think you need to clear the canvas after each redrawn frame. – user17753 Commented Mar 1, 2012 at 19:09
• What's the code to clear the canvas without causing it to flicker? – user784637 Commented Mar 1, 2012 at 19:10
• 1 Don't reload the image every time you redraw – TimCodes.NET Commented Mar 1, 2012 at 19:11
• @LedZeppelin see Chimoo's answer for the clearRect syntax to clear the canvas. – user17753 Commented Mar 1, 2012 at 19:14

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 14

Use context.clearRect(0, 0, canvas.width, canvas.height); and cache your image, don't reload each time you refresh

UPDATE: No idea if this will work, untested and been a while since I used canvas but try it

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

本文标签： javascriptHow to redraw canvas (every 250ms) without flickering between each redrawStack Overflow