通过路径更改，带有requestAnimationFrame的Javascript Canvas动画变得更快
[英]Javascript Canvas Animation with requestAnimationFrame becomes faster by path change
问题描述
I have a Canvas animation where serveral litle objekt(with objekt i mean picture aso a img element)come from up to down. 
我有一个Canvas动画，其中服务器上的对象（从对象到图片都是img元素）从上到下出现。
After i make 2 themes for this animation(i mean that the objekt have different picture depending on theme) the animation becomes faster after every path change respectively theme change. 在为该动画制作2个主题之后（我的意思是对象根据主题具有不同的图片），在每次更改路径或主题更改后，动画都会变得更快。
And i dont have any idea what can be the reason.If anyone can help me i would be very glad. 而且我不知道是什么原因。如果有人可以帮助我，我将非常高兴。
<!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>
And her the liabarys: 还有她的利比亚人：
function ThemeÄndern1(){
Theme = 1;
}
function ThemeÄndern0(){
Theme = 0;
}
PS:pls forgive me gramatical errors in my text i am still Student :) PS：请原谅我的文字方面的语法错误，我仍然是学生:)
1 个解决方案
解决方案1
1 已采纳 2017-07-06 15:16:41
You need to clear the previous animation frame before initiating a new one. 在开始新的动画帧之前，您需要清除之前的动画帧。
To accomplish so, first, declare a global variable, for instance ... 为此，首先声明一个全局变量，例如...
var rAF;
then, assign the requestAnimationFrame to that variable ... 然后，将requestAnimationFrame分配给该变量...
rAF = requestAnimationFrame(Hallo);
and finally, cancel previous animation frame before calling the Hallo function ... 最后，在调用Hallo函数之前取消上一个动画帧...
img.onload = function() {
console.log("Loaded image");
if (rAF) cancelAnimationFrame(rAF); //cancel prev animation frame
Hallo();
};
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
Canvas animation 与 requestAnimationFrame() - Canvas animation with requestAnimationFrame()
JavaScript canvas + requestAnimationFrame 卡顿 - JavaScript canvas + requestAnimationFrame stuttering
减少/限制requestAnimationFrame用于Canvas动画 - reduce / thottle requestAnimationFrame for Canvas animation
requestAnimationFrame使画布动画错误 - requestAnimationFrame makes canvas animation buggy
Javascript：使用requestAnimationFrame没有动画的代码？ - Javascript: code with no animation with requestAnimationFrame?
调用requestAnimationFrame会使动画运行得更快 - Calling requestAnimationFrame causes animation to run faster
在 javascript 中使用 requestAnimationFrame 时没有动画 - No animation while using requestAnimationFrame in javascript
Javascript-具有requestAnimationFrame的面向对象的画布游戏 - Javascript - Object-Oriented Canvas Game with requestAnimationFrame
更改 JavaScript canvas animation 的背景颜色 - Change background color of JavaScript canvas animation
标语javascript变得更快 - Banner javascript becomes more faster
相关标签