我在使用 Canvas 的网页上创建了一个视差背景动画。它使用 setInterval 循环每 20 毫秒渲染一帧。
在试验这种设计时，我注意到如果我使用中间单击技术滚动，动画会暂停。为什么是这样？它只适用于 Canvas ，还是适用于所有间隔事件？
另外，有什么办法可以抑制这个吗？
我在 Windows 10 上运行 Chrome 74.0.3729.131。
这是@Kaiido 要求的代码:
function parallaxCipher(size, color, speed, grid, sector, seed){ //Parallax function
scr = document.getElementById("parallax" + sector); //The canvasses are named "parallax" + ID
ctx = scr.getContext("2d");
ctx.fillStyle = "#000";
ctx.fillRect(0,0,scr.width,scr.height); //Turn area black
var xGridMax = Math.ceil(scr.width / grid);
var yGridMax = Math.ceil(scr.height / grid) + 1;
var seedList = prng(seed,yGridMax * 2); //Simple PRNG
for(var c = 0; c < yGridMax;c++){
seedList[c] += seedList[c + yGridMax] * 256;
}
seedList.length = yGridMax;
var rotation = Math.floor(Math.floor(Date.now() / speed) / grid) % yGridMax;
rotation = yGridMax - rotation - 1; //It's a mess. I know.
if(rotation > 0){
seedList = seedList.slice(seedList.length-rotation).concat(seedList.slice(0,seedList.length - rotation));
}
ctx.fillStyle = color;
for(var a = 0;a<yGridMax;a++){
var row = prng(seedList[a],Math.ceil((xGridMax + 1)/8));
var row2 = [];
for(var d = 0;d<row.length;d++){
row[d] = row[d].toString(2);
row[d] = "0".repeat(8 - row[d].length) + row[d];
row2 = row2.concat(row[d].split(''));
}
row2.length = xGridMax + 1;
var rotation2 = Math.floor(Math.floor(Date.now() / speed) / grid) % xGridMax;
if(rotation2 > 0){
row2 = row2.slice(row2.length-rotation2).concat(row2.slice(0,row2.length - rotation2));
}
for(var b = -1;b<xGridMax;b++){
ctx.font = size + "px monospace";
ctx.fillText(row2[b + 1],(b * grid) - (size * 11 / 30) + ((Date.now() / speed) % grid),(a * grid) + (size / 2) - ((Date.now() / speed) % grid));
}
}
}
function prng(seed, instances){
//PRNG takes a 16 bit seed
var primes = [2,3,5,7,11,13,17,19,23,29,31,37,41,43,47,53,59,61,67,71,73,79,83,89,97,101,103,107,109,113,127,131,137,139,149,151,157,163,167,173,179,181,191,193,197,199,211,223,227,229,233,239,241,251,263,269,271,277,281,283,293,307,311,313,317,331,337,347,349,353,359,367,373,379,383,389,397,401,409,419,421,431,433,439,443,449,457,461,463,467,479,487,491,499,503,509,521,523,541,547,557,563,569,571,577,587,593,599,601,607,613,617,619,631,641,643,647,653,659,661,673,677,683,691,701,709,719,727,733,739,743,751,757,761,769,773,787,797,809,811,821,823,827,829,839,853,857,859,863,877,881,883,887,907,911,919,929,937,941,947,953,967,971,977,983,991,997,1009,1013,1019,1021,1031,1033,1039,1049,1051,1061,1063,1069,1087,1091,1093,1097,1103,1109,1117,1123,1129,1151,1153,1163,1171,1181,1187,1193,1201,1213,1217,1223,1229,1231,1237,1249,1259,1277,1279,1283,1289,1291,1297,1301,1303,1307,1319,1321,1327,1361,1367,1373,1381,1399,1409,1423,1427,1429,1433,1439,1447,1451,1453,1459,1471,1481,1483,1487,1489,1493,1499,1511,1523,1531,1543,1549,1553,1559,1567,1571,1579,1583,1597,1601,1607,1609,1613,1619,1621,1627];
var res = [];
var j = seed % 256;
var k = Math.floor(seed / 256);
for(var a = 0;a < instances;a++){
res.push(((primes[j] * primes[k]) % 257) - 1);
if(primes.includes(res[res.length - 1]) || primes.includes(res[res.length - 1] + 1)){
j = (j + 1) % 257;
}else{
k = (k - 1);
if(k == -1){
k = 256;
}
}
if(res[res.length - 1] == undefined){
console.warn("PRNG error: " + j + ", " + k + ", " + primes[j] + ", " + primes[k]);
}
}
return res;
}
你应该能够运行:
window.setInterval(function(){
parallaxCipher(15,"#0f0",25,18,"1",9999);
},20)
在创建 ID 为“parallax1”的 Canvas 之后。
最佳答案
requestAnimationFrame 没有这样的卡住问题
基本用法
function animation(ms) {
// you can use `ms` to make animations smoother
// while this function should be called every 16.66ms, (60fps),
// the `ms` argument is a Number, unit is milliseconds and should be accurate to 5 µs (microseconds)
//
// ... all your fancy animation
requestAnimationFrame(animation);
}
requestAnimationFrame(animation); // or just animation(), however this way ALL animation is "sync'd" to 60fps including the first frame
关于javascript - 为什么滚动使用中间点击暂停间隔事件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56014051/