使用requestAnimationFrame的Javascript畫布動畫由於路徑變化而變得更快

我有一個Canvas動畫，其中服務對象的對象（我的意思是圖片aso是一個img元素）來自上下。使用requestAnimationFrame的Javascript畫布動畫由於路徑變化而變得更快

當我爲這個動畫製作2個主題（我的意思是對象根據主題有不同的圖片）之後，動畫在每個路徑變化和主題變化之後變得更快。

我沒有任何想法是什麼原因。如果任何人都可以幫助我，我會很高興。

<!DOCTYPE html> 
<html> 

<head> 
    <meta charset="UTF-8"> 
    <title>index</title> 
    <script type="text/javascript" src="../javascript/liabary.js"></script> 
    <link rel="stylesheet" href="../css/CSS.css"> 
</head> 

<body class="body2"> 
    <center class="font2"><h2>Cookie Clicker</h2></center> 
    <canvas id="canvas" style="border: 1px solid; width: 800px; height: 810px;">no support</canvas> 

      <img onclick="AnimationGroßCookie(); myFunctionAdd()" onMousedown="AnimationKleinCookie()" id="cookie" src="../img/cookie.png" alt="cookie"> 
      <p class="font2" id="p1"></p><p class="font2" id="p2">gesammelte cookies:</p> 

      <div onclick="DoubleClicker()" class="font2" id="buyMenu"> 
        <p id="DoubleClicker" style="font-size: 19px; margin-left:30px;">Double Clicker</p> 
        <p style="font-size: 19px; margin-left:55px; margin-top:-15px;">kosten 20</p> 
      </div> 


      <div onclick="GeheimesVideo(); " class="font2" id="buyMenu2"> 
        <p>Super Geheimes Video</p> <!--wennn gekauft langsam größer werdenes video--> 
        <p>kosten: 10.000</p> 
      </div> 


      <div onclick="AddPerSecond()" class="font2" id="Platzhalter"> 
        <p>Platzhalter: 1cookie per second</p> 
        <p>kosten: 100</p> 
      </div> 

      <div onclick="ThemeÄndern0(); ThemeÄndernPath();" class="font2" id="Theme1"> 
        <p>Cookie Theme:ändern per click</p> 
      </div> 

      <div onclick="ThemeÄndern1(); ThemeÄndernPath();" class="font2" id="Theme2"> 
        <p>Donut Theme:ändern per click</p> 
      </div> 

<script> 
console.log("Start"); 
var counter = 0; 
var canvas = document.getElementById('canvas'); 
var ctx = canvas.getContext('2d'); //ctx = contex 
var img = new Image(); 
var add1 = 10; 
var rAF;//raf = requestAnimationFrame 
Theme = 0; 

       canvas.width = canvas.scrollWidth; 
       canvas.height = canvas.scrollHeight; 


       img.onload = function() { 
        console.log("Loaded image"); 
        if (rAF) cancelAnimationFrame(rAF); //cancel prev animation frame 
        Hallo(); 
       }; 

function ThemeÄndernPath() { 
    var cookie = document.getElementById('cookie'); 
       if (Theme == 0) { 
         img.src="../img/cookie.png"; 
         cookie.src="../img/cookie.png"; 
       } else { 
         img.src="../img/donut2.png"; 
         cookie.src="../img/donut2.png"; 
       } 

} 

       ThemeÄndernPath(); 
       //var CookieClickSound = Math.floor((Math.random() * 6) + 0); 

       var cookieArrayBreite =[]; 
       cookieArrayBreite[0] = Math.floor((Math.random() * 810) + 0); 
       cookieArrayBreite[1] = Math.floor((Math.random() * 810) + 0); 
       cookieArrayBreite[2] = Math.floor((Math.random() * 810) + 0); 
       cookieArrayBreite[3] = Math.floor((Math.random() * 810) + 0); 
       cookieArrayBreite[4] = Math.floor((Math.random() * 810) + 0); 
       cookieArrayBreite[5] = Math.floor((Math.random() * 810) + 0); 
       cookieArrayBreite[6] = Math.floor((Math.random() * 810) + 0); 
       cookieArrayBreite[7] = Math.floor((Math.random() * 810) + 0); 
       cookieArrayBreite[8] = Math.floor((Math.random() * 810) + 0); 
       cookieArrayBreite[9] = Math.floor((Math.random() * 810) + 0); 
       cookieArrayBreite[10] = Math.floor((Math.random() * 810) + 0); 
       cookieArrayBreite[11] = Math.floor((Math.random() * 810) + 0); 
       cookieArrayBreite[12] = Math.floor((Math.random() * 810) + 0); 
       cookieArrayBreite[13] = Math.floor((Math.random() * 810) + 0); 
       cookieArrayBreite[14] = Math.floor((Math.random() * 810) + 0); 
       cookieArrayBreite[15] = Math.floor((Math.random() * 810) + 0); 

       var cookieArrayHöhe =[]; 
       cookieArrayHöhe[0] = Math.floor((Math.random() * 810) + 0); 
       cookieArrayHöhe[1] = Math.floor((Math.random() * 810) + 0); 
       cookieArrayHöhe[2] = Math.floor((Math.random() * 810) + 0); 
       cookieArrayHöhe[3] = Math.floor((Math.random() * 810) + 0); 
       cookieArrayHöhe[4] = Math.floor((Math.random() * 810) + 0); 
       cookieArrayHöhe[5] = Math.floor((Math.random() * 810) + 0); 
       cookieArrayHöhe[6] = Math.floor((Math.random() * 810) + 0); 
       cookieArrayHöhe[7] = Math.floor((Math.random() * 810) + 0); 
       cookieArrayHöhe[8] = Math.floor((Math.random() * 810) + 0); 
       cookieArrayHöhe[9] = Math.floor((Math.random() * 810) + 0); 
       cookieArrayHöhe[10] = Math.floor((Math.random() * 810) + 0); 
       cookieArrayHöhe[11] = Math.floor((Math.random() * 810) + 0); 
       cookieArrayHöhe[12] = Math.floor((Math.random() * 810) + 0); 
       cookieArrayHöhe[13] = Math.floor((Math.random() * 810) + 0); 
       cookieArrayHöhe[14] = Math.floor((Math.random() * 810) + 0); 
       cookieArrayHöhe[15] = Math.floor((Math.random() * 810) + 0); 

       setTimeout(function() { cookieCanvas(); },3000); //dont work 
       window.setInterval(myCallback, 13200); 

        function myCallback() { 
           cookieArrayBreite[0] = Math.floor((Math.random() * 810) + 0); 
           cookieArrayBreite[1] = Math.floor((Math.random() * 810) + 0); 
           cookieArrayBreite[2] = Math.floor((Math.random() * 810) + 0); 
           cookieArrayBreite[3] = Math.floor((Math.random() * 810) + 0); 
           cookieArrayBreite[4] = Math.floor((Math.random() * 810) + 0); 
           cookieArrayBreite[5] = Math.floor((Math.random() * 810) + 0); 
           cookieArrayBreite[6] = Math.floor((Math.random() * 810) + 0); 
           cookieArrayBreite[7] = Math.floor((Math.random() * 810) + 0); 
           cookieArrayBreite[8] = Math.floor((Math.random() * 810) + 0); 
           cookieArrayBreite[9] = Math.floor((Math.random() * 810) + 0); 
           cookieArrayBreite[10] = Math.floor((Math.random() * 810) + 0); 
           cookieArrayBreite[11] = Math.floor((Math.random() * 810) + 0); 
           cookieArrayBreite[12] = Math.floor((Math.random() * 810) + 0); 
           cookieArrayBreite[13] = Math.floor((Math.random() * 810) + 0); 
           cookieArrayBreite[14] = Math.floor((Math.random() * 810) + 0); 
           cookieArrayBreite[15] = Math.floor((Math.random() * 810) + 0); 

      console.log(cookieArrayBreite); 
} 

window.setInterval(myCallback, 13200); 

    function myCallback() { 
       cookieArrayHöhe[0] = Math.floor((Math.random() * 810) + 0); 
       cookieArrayHöhe[1] = Math.floor((Math.random() * 810) + 0); 
       cookieArrayHöhe[2] = Math.floor((Math.random() * 810) + 0); 
       cookieArrayHöhe[3] = Math.floor((Math.random() * 810) + 0); 
       cookieArrayHöhe[4] = Math.floor((Math.random() * 810) + 0); 
       cookieArrayHöhe[5] = Math.floor((Math.random() * 810) + 0); 
       cookieArrayHöhe[6] = Math.floor((Math.random() * 810) + 0); 
       cookieArrayHöhe[7] = Math.floor((Math.random() * 810) + 0); 
       cookieArrayHöhe[8] = Math.floor((Math.random() * 810) + 0); 
       cookieArrayHöhe[9] = Math.floor((Math.random() * 810) + 0); 
       cookieArrayHöhe[10] = Math.floor((Math.random() * 810) + 0); 
       cookieArrayHöhe[11] = Math.floor((Math.random() * 810) + 0); 
       cookieArrayHöhe[12] = Math.floor((Math.random() * 810) + 0); 
       cookieArrayHöhe[13] = Math.floor((Math.random() * 810) + 0); 
       cookieArrayHöhe[14] = Math.floor((Math.random() * 810) + 0); 
       cookieArrayHöhe[15] = Math.floor((Math.random() * 810) + 0); 

console.log(cookieArrayHöhe); 
} 


       function Hallo() { 

        if (add1 == 800) { 

         add1 = 10; // need to reset add's value 

         console.log("resetet"); 

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

         ctx.beginPath(); 
         ctx.rect(0, 0, 1000, 1000); 
         ctx.fillStyle = "lightblue"; 
         ctx.fill(); 

          ctx.drawImage(img, cookieArrayBreite[0], cookieArrayHöhe[0] + add1, 50, 50); 
         ctx.drawImage(img, cookieArrayBreite[1], cookieArrayHöhe[1] + add1, 50, 50); 
         ctx.drawImage(img, cookieArrayBreite[2], cookieArrayHöhe[2] + add1, 50, 50); 
         ctx.drawImage(img, cookieArrayBreite[3], cookieArrayHöhe[3] + add1, 50, 50); 
         ctx.drawImage(img, cookieArrayBreite[4], cookieArrayHöhe[4] + add1, 50, 50); 
         ctx.drawImage(img, cookieArrayBreite[5], cookieArrayHöhe[5] + add1, 50, 50); 
         ctx.drawImage(img, cookieArrayBreite[6], cookieArrayHöhe[6] + add1, 50, 50); 
         ctx.drawImage(img, cookieArrayBreite[7], cookieArrayHöhe[7] + add1, 50, 50); 
          ctx.drawImage(img, cookieArrayBreite[8], cookieArrayHöhe[8] + add1, 50, 50); 
         ctx.drawImage(img, cookieArrayBreite[9], cookieArrayHöhe[9] + add1, 50, 50); 
          ctx.drawImage(img, cookieArrayBreite[10], cookieArrayHöhe[10] + add1, 50, 50); 
          ctx.drawImage(img, cookieArrayBreite[11], cookieArrayHöhe[11] + add1, 50, 50); 
          ctx.drawImage(img, cookieArrayBreite[12], cookieArrayHöhe[12] + add1, 50, 50); 
          ctx.drawImage(img, cookieArrayBreite[13], cookieArrayHöhe[13] + add1, 50, 50); 



        } else { 
         console.log("Animation begining"); 

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

         ctx.beginPath(); 
         ctx.rect(0, 0, 1000, 1000); 
         ctx.fillStyle = "lightblue"; 
         ctx.fill(); 

         ctx.drawImage(img, cookieArrayBreite[0], cookieArrayHöhe[0] + add1, 50, 50); 
         ctx.drawImage(img, cookieArrayBreite[1], cookieArrayHöhe[1] + add1, 50, 50); 
         ctx.drawImage(img, cookieArrayBreite[2], cookieArrayHöhe[2] + add1, 50, 50); 
         ctx.drawImage(img, cookieArrayBreite[3], cookieArrayHöhe[3] + add1, 50, 50); 
         ctx.drawImage(img, cookieArrayBreite[4], cookieArrayHöhe[4] + add1, 50, 50); 
         ctx.drawImage(img, cookieArrayBreite[5], cookieArrayHöhe[5] + add1, 50, 50); 
         ctx.drawImage(img, cookieArrayBreite[6], cookieArrayHöhe[6] + add1, 50, 50); 
         ctx.drawImage(img, cookieArrayBreite[7], cookieArrayHöhe[7] + add1, 50, 50); 
         ctx.drawImage(img, cookieArrayBreite[8], cookieArrayHöhe[8] + add1, 50, 50); 
         ctx.drawImage(img, cookieArrayBreite[9], cookieArrayHöhe[9] + add1, 50, 50); 
         ctx.drawImage(img, cookieArrayBreite[10], cookieArrayHöhe[10] + add1, 50, 50); 
         ctx.drawImage(img, cookieArrayBreite[11], cookieArrayHöhe[11] + add1, 50, 50); 
         ctx.drawImage(img, cookieArrayBreite[12], cookieArrayHöhe[12] + add1, 50, 50); 
         ctx.drawImage(img, cookieArrayBreite[13], cookieArrayHöhe[13] + add1, 50, 50); 

         add1++; 
        } 
        rAF = requestAnimationFrame(Hallo); 
        requestAnimationFrame(Hallo); 
       } 
</script> 
<audio controls autoplay id="AudioClick"> 
    <source src="" type=""> 
    Audio element is not supported by your browser 
</audio> 

</body> 

</html>

而且她liabarys：

function ThemeÄndern1(){ 
     Theme = 1; 
} 

function ThemeÄndern0(){ 
     Theme = 0; 
}

PS：請原諒我在我的文字gramatical錯誤，我現在還是學生:)

來源

2017-07-06 Yuto

你需要啓動之前清除以前的動畫幀新的一個。

要做到如此，首先，聲明一個全局變量，例如...

var rAF;

然後，分配該變量...

rAF = requestAnimationFrame(Hallo);

最後，取消以前的動畫幀前調用Hallo函數...

img.onload = function() { 
    console.log("Loaded image"); 
    if (rAF) cancelAnimationFrame(rAF); //cancel prev animation frame 
    Hallo(); 
};

來源

2017-07-06 15:16:41

ah okay i tr它感謝你。：D – Yuto

我編輯它，你的意思是這樣嗎？ – Yuto

，如果我這樣做，腳本是如此之快以至於我的瀏覽器正在編寫代碼，所以無法工作。 – Yuto

使用requestAnimationFrame的Javascript畫布動畫由於路徑變化而變得更快

回答

相關問題