鍍金池/ 問答/HTML5  HTML/ canvas drawImage 閃屏問題

canvas drawImage 閃屏問題

代碼如下 在進行

if(-ballX >= canvas.width-10){
     ballX = 0
     ctx.drawImage(img,canvas.width, 0,0,0); 
}

這個地方判斷的二次重新繪制的時候會出現(xiàn)閃屏 有大神知道怎么解決嗎？
<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>loading</title>
<style>
    #loading{
        display: block;
        margin: 0 auto;
    }
</style>

</head>
<body>

<canvas id="loading" width="187" height="91"></canvas>
<script>
    var requestAnimationFrame = requestAnimationFrame ? requestAnimationFrame : webkitRequestAnimationFrame,
          cancelAnimationFrame  = cancelAnimationFrame ? cancelAnimationFrame : webkitCancelAnimationFrame;
    var canvas = document.getElementById('loading')
    var ctx = canvas.getContext("2d")
    /*  
    設(shè)置背景  
        createPattern(img,平鋪方式)  
        平鋪方式:repeat,repeat-x,repeat-y,no-repeat  
    */  
    var imgs = new Image();  
    var xspeed = -2;
    var ballX = 0
    // imgs.src = "../loading/images/bg.png";  
    // imgs.onload = function() {  
    //   ctx.drawImage(imgs, 0, 0);  
    // }
    var img = new Image();
        img.src = "../loading/images/bg.png"; 
    function animate(){
        requestAnimationFrame(animate);
        draw();
    }
    requestAnimationFrame(animate);
    function draw(){
        
           ballX += xspeed;
        ctx.beginPath();
        if(-ballX >= canvas.width-10){
           ballX = 0
           ctx.drawImage(img,canvas.width, 0,0,0); 
        }else{
           ctx.clearRect(0,0,canvas.width,canvas.height);
           ctx.drawImage(img,ballX, 0); 
        }
        ctx.closePath();
    }
</script>

</body>
</html>

回答
編輯回答
凹凸曼

閃爍是因為圖片從無到有，視覺上的差異性導致的，不是代碼的問題，你可以改下實現(xiàn)邏輯，如：漸進式的 無--有--無

var img = new Image();
img.onload = animate;
img.src = "http://p0.so.qhimgs1.com/bdr/200_200_/t01f83d392c3132fa1a.jpg"; 
function animate(){
    requestAnimationFrame(animate);
    draw();
}
function draw(){
    ballX += xspeed;
    ctx.beginPath();
    ballX = (-ballX >= canvas.width-10)?canvas.width:ballX
    ctx.drawImage(img,ballX, 0); 
    ctx.closePath();
}
2017年3月14日 03:27