Javascript 更新画布上的高度/宽度并重新开始绘制
我正在用JavaScript玩Javascript 更新画布上的高度/宽度并重新开始绘制,javascript,jquery,html,animation,canvas,Javascript,Jquery,Html,Animation,Canvas,我正在用JavaScript玩，我碰到了麻烦。至少可以说，JavaScript不是我的强项之一，所以我认为这个问题非常基本，并为没有挑战您的思维提前道歉 我想要的是将内联更新，即与浏览器的视图点大小相同，如果它们在加载内容后调整大小。我搜索了堆栈溢出，找到了大量我测试过的“侦听脚本”。我测试过的那些调整了画布的大小，但是动画看起来很疯狂。下面是我正在使用的侦听器 (function(){ var // Obtain a reference to the canvas elemen
(function(){
var
// Obtain a reference to the canvas element
// using its id.
htmlCanvas = document.getElementById('world'),
// Obtain a graphics context on the
// canvas element for drawing.
context = htmlCanvas.getContext('2d');
// Start listening to resize events and
// draw canvas.
initialize();
function initialize() {
// Register an event listener to
// call the resizeCanvas() function each time
// the window is resized.
window.addEventListener('resize', resizeCanvas, false);
// Draw canvas border for the first time.
resizeCanvas();
}
// Display custom canvas.
// In this case it's a blue, 5 pixel border that
// resizes along with the browser window.
function redraw() {
updateScene();
}
// Runs each time the DOM window resize event fires.
// Resets the canvas dimensions to match window,
// then draws the new borders accordingly.
function resizeCanvas() {
htmlCanvas.width = window.innerWidth;
htmlCanvas.height = window.innerHeight;
redraw();
}
})();
jQuery(function($) {
!+-+-+!+-+-+!+-+-+!+-+-+!+-+-+!+-+-+!+-+-+!+-+-+!
function(d, w){
var FPS = 30;
var F = 300;
var N = 3;
var VERTEX_MAX = 10;
var TRAIL_QUALITY = 4000;
var mu = 0.5;
var bmRandom = function(mu, sigma){
var x, y, r, tmp=null, tmp2;
return function(){
if(tmp !== null){
tmp2 = tmp;
tmp = null;
return y*tmp2+mu;
}
do{
x = Math.random()*2-1;
y = Math.random()*2-1;
r = x*x+y*y;
}while(r>=1);
tmp = sigma*Math.sqrt(-2*Math.log(r)/r);
return x*tmp+mu;
};
};
pointCopy = function(src, dst){
dst.x = src.x;
dst.y = src.y;
dst.z = src.z;
return dst;
};
Trail = function(pos, t, color_f){
this.pos={x:0,y:0,z:0};
this.start={x:0,y:0,z:0};
this.goal={x:0,y:0,z:0};
this.anchor_1={x:0,y:0,z:0};
this.anchor_2={x:0,y:0,z:0};
this.start_time = 0;
this.take_time = 1;
this.vertexes = [];
this.anchors_1 = [];
this.anchors_2 = [];
this.color_f = color_f;
pointCopy(pos, this.pos);
pointCopy(pos, this.start);
pointCopy(pos, this.goal);
this.setNextGoal(t);
};
Trail.prototype.setNextGoal = function(t, target){
pointCopy(this.goal, this.start);
this.anchor_1.x = this.start.x+(this.start.x-this.anchor_2.x)*mu;
this.anchor_1.y = this.start.y+(this.start.y-this.anchor_2.y)*mu;
this.anchor_1.z = this.start.z+(this.start.z-this.anchor_2.z)*mu;
if(target){
this.anchor_2.x = (this.anchor_1.x+target.x)/2+myrand();
this.anchor_2.y = (this.anchor_1.y+target.y)/2+myrand();
this.anchor_2.z = (this.anchor_1.z+target.z)/2+myrand();
this.goal.x = target.x;
this.goal.y = target.y;
this.goal.z = target.z;
}else{
this.anchor_2.x = this.anchor_1.x+myrand();
this.anchor_2.y = this.anchor_1.y+myrand();
this.anchor_2.z = this.anchor_1.z+myrand();
this.goal.x = this.anchor_2.x+myrand();
this.goal.y = this.anchor_2.y+myrand();
this.goal.z = this.anchor_2.z+myrand();
}
this.start_time = t;
this.take_time = 200+Math.random()*200;
this.vertexes.push(pointCopy(this.start, {x:0,y:0,z:0}));
this.anchors_1.push(pointCopy(this.anchor_1, {x:0,y:0,z:0}));
this.anchors_2.push(pointCopy(this.anchor_2, {x:0,y:0,z:0}));
if(this.vertexes.length > VERTEX_MAX){
this.vertexes.splice(0,this.vertexes.length-VERTEX_MAX);
this.anchors_1.splice(0,this.anchors_1.length-VERTEX_MAX);
this.anchors_2.splice(0,this.anchors_2.length-VERTEX_MAX);
}
};
Trail.prototype.update = function(t, target){
bezier3(
t-this.start_time,
this.start,
this.anchor_1,
this.anchor_2,
this.goal,
this.take_time,
this.pos
);
if(t-this.start_time > this.take_time){
this.setNextGoal(this.start_time+this.take_time, target);
this.update(t, target);
}
};
Trail.prototype.draw = function(ctx, camera, t){
var i, dz, dt, ddt, rt, a, v={x:0, y:0, z:0};
var ps = {x:0, y:0};
ctx.beginPath();
if(perspective(this.vertexes[0], camera, ps)){
ctx.moveTo(ps.x, ps.y);
}
var x0 = ps.x;
rt = (t-this.start_time)/this.take_time;
for(i=1; i<this.vertexes.length; i++){
ddt = 0.01;
for(dt=0; dt<1; dt+=ddt){
bezier3(dt,
this.vertexes[i-1],
this.anchors_1[i-1],
this.anchors_2[i-1],
this.vertexes[i],
1,
v);
if(perspective(v, camera, ps)){
dz = v.z-camera.z;
a = 1-(this.vertexes.length-i+1-dt+rt)/VERTEX_MAX;
this.color_f(ctx, a, dz);
ctx.lineTo(ps.x, ps.y);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(ps.x, ps.y);
ddt = dz/TRAIL_QUALITY+0.01;
}
}
}
ddt = 0.01;
for(dt=0; dt<rt; dt+=ddt){
bezier3(dt,
this.start,
this.anchor_1,
this.anchor_2,
this.goal,
1,
v);
if(perspective(v, camera, ps)){
dz = v.z-camera.z;
a = 1-(1-dt+rt)/VERTEX_MAX;
this.color_f(ctx, a, dz);
ctx.lineTo(ps.x, ps.y);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(ps.x, ps.y);
ddt = dz/TRAIL_QUALITY+0.01;
}
}
if(perspective(this.pos, camera, ps)){
dz = this.pos.z-camera.z;
a = 1-1/VERTEX_MAX;
this.color_f(ctx, a, dz);
ctx.lineTo(ps.x, ps.y);
ctx.stroke();
}
};
bezier3 = function(t, a, b, c, d, e, dst){
t /= e;
dst.x =
a.x*(1-t)*(1-t)*(1-t)+
b.x*3*t*(1-t)*(1-t)+
c.x*3*t*t*(1-t)+
d.x*t*t*t;
dst.y =
a.y*(1-t)*(1-t)*(1-t)+
b.y*3*t*(1-t)*(1-t)+
c.y*3*t*t*(1-t)+
d.y*t*t*t;
dst.z =
a.z*(1-t)*(1-t)*(1-t)+
b.z*3*t*(1-t)*(1-t)+
c.z*3*t*t*(1-t)+
d.z*t*t*t;
};
perspective = function(point, camera, dst){
var dx = point.x-camera.x;
var dy = point.y-camera.y;
var dz = point.z-camera.z;
if(dz > 0){
dst.x = F*dx/dz;
dst.y = F*dy/dz;
return true;
}
return false;
};
updateScene = function(ctx){
var i, goal;
time_now = new Date().getTime();
var time_d = time_now-time_pre;
trails[0].update(time_now);
for(i=1; i<trails.length; i++){
trails[i].update(time_now, trails[i-1].pos);
}
camera.x += (trails[0].pos.x-camera.x)*0.0005*time_d;
camera.y += (trails[0].pos.y-camera.y)*0.0005*time_d;
camera.z += (trails[0].pos.z-camera.z-100)*0.0005*time_d;
time_pre = time_now;
};
drawScene = function(ctx){
var i;
ctx.clearRect(-canvas.width/2, -canvas.height/2, canvas.width, canvas.height);
for(i=0; i<trails.length; i++){
trails[i].draw(ctx, camera, time_now);
}
};
var myrand = bmRandom(0,20);
var canvas = d.getElementById("world");
var ctx = canvas.getContext("2d");
var trails = [];
var i;
var time_now = new Date().getTime();
var time_pre = time_now;
var camera = {x:0, y:0, z:-200};
for(i=0; i<N; i++){
trails.push(new Trail({x:myrand(), y:myrand(), z:myrand()},
time_now,
function(a,z){return "#FFFFFF";}));
}
for(i=0; i<N; i++){
switch(i%3){
case 0:
trails[i].color_f=function(ctx, a, dz){
var b = dz<10?0:a*F/dz;
b = (b>1?1:b)*(dz<30?(dz-10)/20:1);
ctx.strokeStyle = "rgba(255,"+Math.floor(255*a)+",0,"+b+")";
ctx.lineWidth = F/dz;
ctx.lineCap = b>0.8?"round":"butt";
};
break;
case 1:
trails[i].color_f=function(ctx, a, dz){
var b = dz<10?0:a*F/dz;
b = (b>1?1:b)*(dz<30?(dz-10)/20:1);
ctx.strokeStyle = "rgba(0, 255,"+Math.floor(255*a)+","+b+")";
ctx.lineWidth = F/dz;
ctx.lineCap = b>0.8?"round":"butt";
};
break;
default:
trails[i].color_f=function(ctx, a, dz){
var b = dz<10?0:a*F/dz;
b = (b>1?1:b)*(dz<30?(dz-10)/20:1);
ctx.strokeStyle = "rgba("+Math.floor(255*a)+",0,255,"+b+")";
ctx.lineWidth = F/dz;
ctx.lineCap = b>0.8?"round":"butt";
};
break;
}
}
canvas.width = w.innerWidth;
canvas.height = w.innerHeight;
ctx.translate(canvas.width/2, canvas.height/2);
var loop = function(){
updateScene();
drawScene(ctx);
w.requestAnimationFrame(loop);
}
loop();
}(document, window);
});
(function(){
var
// Obtain a reference to the canvas element
// using its id.
htmlCanvas = document.getElementById('world'),
// Obtain a graphics context on the
// canvas element for drawing.
context = htmlCanvas.getContext('2d');
// Start listening to resize events and
// draw canvas.
initialize();
function initialize() {
// Register an event listener to
// call the resizeCanvas() function each time
// the window is resized.
window.addEventListener('resize', resizeCanvas, false);
// Draw canvas border for the first time.
resizeCanvas();
}
// Display custom canvas.
// In this case it's a blue, 5 pixel border that
// resizes along with the browser window.
function redraw() {
updateScene();
}
// Runs each time the DOM window resize event fires.
// Resets the canvas dimensions to match window,
// then draws the new borders accordingly.
function resizeCanvas() {
htmlCanvas.width = window.innerWidth;
htmlCanvas.height = window.innerHeight;
redraw();
}
})();
jQuery(function($) {
!+-+-+!+-+-+!+-+-+!+-+-+!+-+-+!+-+-+!+-+-+!+-+-+!
function(d, w){
var FPS = 30;
var F = 300;
var N = 3;
var VERTEX_MAX = 10;
var TRAIL_QUALITY = 4000;
var mu = 0.5;
var bmRandom = function(mu, sigma){
var x, y, r, tmp=null, tmp2;
return function(){
if(tmp !== null){
tmp2 = tmp;
tmp = null;
return y*tmp2+mu;
}
do{
x = Math.random()*2-1;
y = Math.random()*2-1;
r = x*x+y*y;
}while(r>=1);
tmp = sigma*Math.sqrt(-2*Math.log(r)/r);
return x*tmp+mu;
};
};
pointCopy = function(src, dst){
dst.x = src.x;
dst.y = src.y;
dst.z = src.z;
return dst;
};
Trail = function(pos, t, color_f){
this.pos={x:0,y:0,z:0};
this.start={x:0,y:0,z:0};
this.goal={x:0,y:0,z:0};
this.anchor_1={x:0,y:0,z:0};
this.anchor_2={x:0,y:0,z:0};
this.start_time = 0;
this.take_time = 1;
this.vertexes = [];
this.anchors_1 = [];
this.anchors_2 = [];
this.color_f = color_f;
pointCopy(pos, this.pos);
pointCopy(pos, this.start);
pointCopy(pos, this.goal);
this.setNextGoal(t);
};
Trail.prototype.setNextGoal = function(t, target){
pointCopy(this.goal, this.start);
this.anchor_1.x = this.start.x+(this.start.x-this.anchor_2.x)*mu;
this.anchor_1.y = this.start.y+(this.start.y-this.anchor_2.y)*mu;
this.anchor_1.z = this.start.z+(this.start.z-this.anchor_2.z)*mu;
if(target){
this.anchor_2.x = (this.anchor_1.x+target.x)/2+myrand();
this.anchor_2.y = (this.anchor_1.y+target.y)/2+myrand();
this.anchor_2.z = (this.anchor_1.z+target.z)/2+myrand();
this.goal.x = target.x;
this.goal.y = target.y;
this.goal.z = target.z;
}else{
this.anchor_2.x = this.anchor_1.x+myrand();
this.anchor_2.y = this.anchor_1.y+myrand();
this.anchor_2.z = this.anchor_1.z+myrand();
this.goal.x = this.anchor_2.x+myrand();
this.goal.y = this.anchor_2.y+myrand();
this.goal.z = this.anchor_2.z+myrand();
}
this.start_time = t;
this.take_time = 200+Math.random()*200;
this.vertexes.push(pointCopy(this.start, {x:0,y:0,z:0}));
this.anchors_1.push(pointCopy(this.anchor_1, {x:0,y:0,z:0}));
this.anchors_2.push(pointCopy(this.anchor_2, {x:0,y:0,z:0}));
if(this.vertexes.length > VERTEX_MAX){
this.vertexes.splice(0,this.vertexes.length-VERTEX_MAX);
this.anchors_1.splice(0,this.anchors_1.length-VERTEX_MAX);
this.anchors_2.splice(0,this.anchors_2.length-VERTEX_MAX);
}
};
Trail.prototype.update = function(t, target){
bezier3(
t-this.start_time,
this.start,
this.anchor_1,
this.anchor_2,
this.goal,
this.take_time,
this.pos
);
if(t-this.start_time > this.take_time){
this.setNextGoal(this.start_time+this.take_time, target);
this.update(t, target);
}
};
Trail.prototype.draw = function(ctx, camera, t){
var i, dz, dt, ddt, rt, a, v={x:0, y:0, z:0};
var ps = {x:0, y:0};
ctx.beginPath();
if(perspective(this.vertexes[0], camera, ps)){
ctx.moveTo(ps.x, ps.y);
}
var x0 = ps.x;
rt = (t-this.start_time)/this.take_time;
for(i=1; i<this.vertexes.length; i++){
ddt = 0.01;
for(dt=0; dt<1; dt+=ddt){
bezier3(dt,
this.vertexes[i-1],
this.anchors_1[i-1],
this.anchors_2[i-1],
this.vertexes[i],
1,
v);
if(perspective(v, camera, ps)){
dz = v.z-camera.z;
a = 1-(this.vertexes.length-i+1-dt+rt)/VERTEX_MAX;
this.color_f(ctx, a, dz);
ctx.lineTo(ps.x, ps.y);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(ps.x, ps.y);
ddt = dz/TRAIL_QUALITY+0.01;
}
}
}
ddt = 0.01;
for(dt=0; dt<rt; dt+=ddt){
bezier3(dt,
this.start,
this.anchor_1,
this.anchor_2,
this.goal,
1,
v);
if(perspective(v, camera, ps)){
dz = v.z-camera.z;
a = 1-(1-dt+rt)/VERTEX_MAX;
this.color_f(ctx, a, dz);
ctx.lineTo(ps.x, ps.y);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(ps.x, ps.y);
ddt = dz/TRAIL_QUALITY+0.01;
}
}
if(perspective(this.pos, camera, ps)){
dz = this.pos.z-camera.z;
a = 1-1/VERTEX_MAX;
this.color_f(ctx, a, dz);
ctx.lineTo(ps.x, ps.y);
ctx.stroke();
}
};
bezier3 = function(t, a, b, c, d, e, dst){
t /= e;
dst.x =
a.x*(1-t)*(1-t)*(1-t)+
b.x*3*t*(1-t)*(1-t)+
c.x*3*t*t*(1-t)+
d.x*t*t*t;
dst.y =
a.y*(1-t)*(1-t)*(1-t)+
b.y*3*t*(1-t)*(1-t)+
c.y*3*t*t*(1-t)+
d.y*t*t*t;
dst.z =
a.z*(1-t)*(1-t)*(1-t)+
b.z*3*t*(1-t)*(1-t)+
c.z*3*t*t*(1-t)+
d.z*t*t*t;
};
perspective = function(point, camera, dst){
var dx = point.x-camera.x;
var dy = point.y-camera.y;
var dz = point.z-camera.z;
if(dz > 0){
dst.x = F*dx/dz;
dst.y = F*dy/dz;
return true;
}
return false;
};
updateScene = function(ctx){
var i, goal;
time_now = new Date().getTime();
var time_d = time_now-time_pre;
trails[0].update(time_now);
for(i=1; i<trails.length; i++){
trails[i].update(time_now, trails[i-1].pos);
}
camera.x += (trails[0].pos.x-camera.x)*0.0005*time_d;
camera.y += (trails[0].pos.y-camera.y)*0.0005*time_d;
camera.z += (trails[0].pos.z-camera.z-100)*0.0005*time_d;
time_pre = time_now;
};
drawScene = function(ctx){
var i;
ctx.clearRect(-canvas.width/2, -canvas.height/2, canvas.width, canvas.height);
for(i=0; i<trails.length; i++){
trails[i].draw(ctx, camera, time_now);
}
};
var myrand = bmRandom(0,20);
var canvas = d.getElementById("world");
var ctx = canvas.getContext("2d");
var trails = [];
var i;
var time_now = new Date().getTime();
var time_pre = time_now;
var camera = {x:0, y:0, z:-200};
for(i=0; i<N; i++){
trails.push(new Trail({x:myrand(), y:myrand(), z:myrand()},
time_now,
function(a,z){return "#FFFFFF";}));
}
for(i=0; i<N; i++){
switch(i%3){
case 0:
trails[i].color_f=function(ctx, a, dz){
var b = dz<10?0:a*F/dz;
b = (b>1?1:b)*(dz<30?(dz-10)/20:1);
ctx.strokeStyle = "rgba(255,"+Math.floor(255*a)+",0,"+b+")";
ctx.lineWidth = F/dz;
ctx.lineCap = b>0.8?"round":"butt";
};
break;
case 1:
trails[i].color_f=function(ctx, a, dz){
var b = dz<10?0:a*F/dz;
b = (b>1?1:b)*(dz<30?(dz-10)/20:1);
ctx.strokeStyle = "rgba(0, 255,"+Math.floor(255*a)+","+b+")";
ctx.lineWidth = F/dz;
ctx.lineCap = b>0.8?"round":"butt";
};
break;
default:
trails[i].color_f=function(ctx, a, dz){
var b = dz<10?0:a*F/dz;
b = (b>1?1:b)*(dz<30?(dz-10)/20:1);
ctx.strokeStyle = "rgba("+Math.floor(255*a)+",0,255,"+b+")";
ctx.lineWidth = F/dz;
ctx.lineCap = b>0.8?"round":"butt";
};
break;
}
}
canvas.width = w.innerWidth;
canvas.height = w.innerHeight;
ctx.translate(canvas.width/2, canvas.height/2);
var loop = function(){
updateScene();
drawScene(ctx);
w.requestAnimationFrame(loop);
}
loop();
}(document, window);
});
jQuery（函数（$）{
!+-+-+!+-+-+!+-+-+!+-+-+!+-+-+!+-+-+!+-+-+!+-+-+!
功能（d，w）{
var FPS=30；
var F=300；
var N=3；
var VERTEX_MAX=10；
var-TRAIL_-QUALITY=4000；
var mu=0.5；
var bmRandom=函数（μ，σ）{
变量x，y，r，tmp=null，tmp2；
返回函数（）{
如果（tmp！==null）{
tmp2=tmp；
tmp=null；
返回y*tmp2+mu；
}
做{
x=数学随机（）*2-1；
y=数学随机（）*2-1；
r=x*x+y*y；
}而（r>=1）；
tmp=sigma*Math.sqrt（-2*Math.log（r）/r）；
返回x*tmp+mu；
};
};
pointCopy=函数（src、dst）{
dst.x=src.x；
dst.y=src.y；
dst.z=src.z；
返回dst；
};
轨迹=功能（位置、t、颜色）{
this.pos={x:0，y:0，z:0}；
this.start={x:0，y:0，z:0}；
this.goal={x:0，y:0，z:0}；
this.anchor_1={x:0，y:0，z:0}；
this.anchor_2={x:0，y:0，z:0}；
此值为0.start_time=0；
这是1.take_time=1；
this.vertexs=[]；
this.archors_1=[]；
this.archors_2=[]；
this.color\u f=color\u f；
点拷贝（pos，this.pos）；
点拷贝（位置，本次启动）；
点拷贝（pos，this.goal）；
这是setNextGoal（t）；
};
Trail.prototype.setNextGoal=函数（t，目标）{
pointCopy（this.goal，this.start）；
this.anchor_1.x=this.start.x+（this.start.x-this.anchor_2.x）*mu；
this.anchor_1.y=this.start.y+（this.start.y-this.anchor_2.y）*mu；
this.anchor_1.z=this.start.z+（this.start.z-this.anchor_2.z）*mu；
如果（目标）{
this.anchor_2.x=（this.anchor_1.x+target.x）/2+myrand（）；
this.anchor_2.y=（this.anchor_1.y+target.y）/2+myrand（）；
this.anchor_2.z=（this.anchor_1.z+target.z）/2+myrand（）；
这个.goal.x=target.x；
this.goal.y=target.y；
this.goal.z=target.z；
}否则{
this.anchor_2.x=this.anchor_1.x+myrand（）；
this.anchor_2.y=this.anchor_1.y+myrand（）；
this.anchor_2.z=this.anchor_1.z+myrand（）；
this.goal.x=this.anchor_2.x+myrand（）；
this.goal.y=this.anchor_2.y+myrand（）；
this.goal.z=this.anchor_2.z+myrand（）；
}
这个。开始时间=t；
this.take_time=200+Math.random（）*200；
push（pointCopy（this.start，{x:0，y:0，z:0}））；
this.anchors_1.push（pointCopy（this.anchor_1，{x:0，y:0，z:0}））；
this.anchors_2.push（pointCopy（this.anchor_2，{x:0，y:0，z:0}））；
如果（this.vertexs.length>顶点_MAX）{
this.vertexs.splice（0，this.vertexs.length-VERTEX_MAX）；
this.anchors_1.拼接（0，this.anchors_1.长度-顶点_MAX）；
this.anchors_2.拼接（0，this.anchors_2.长度-顶点_MAX）；
}
};
Trail.prototype.update=函数（t，目标）{
贝塞尔3(
这个，开始时间，
这个，开始，
这是1号主播，
这个,锚2,，
这个目标,，
这个，慢慢来，
这个.pos
);
如果（t-this.start\u time>this.take\u time）{
this.setNextGoal（this.start\u time+this.take\u time，target）；
更新（t，目标）；
}
};
Trail.prototype.draw=功能（ctx、摄像头、t）{
变量i，dz，dt，ddt，rt，a，v={x:0，y:0，z:0}；
var ps={x:0，y:0}；
ctx.beginPath（）；
if（透视图（此顶点[0]，摄影机，ps））{
ctx.moveTo（ps.x，ps.y）；
}
var x0=ps.x；
rt=（t-this.start\u time）/this.take\u time；
对于（i=1；i用此公式求解
var loop = function(){
canvas.width = w.innerWidth;
canvas.height = w.innerHeight;
ctx.translate(canvas.width/2, canvas.height/2);
updateScene();
drawScene(ctx);
w.requestAnimationFrame(loop);
}
太棒了，谢谢你这么快就回复了一个快速有效的解决方案！我想我只是碰到了一个小错误，我被弹出窗口10分钟，回到窗口时动画停止了，知道吗？@bybe这是设计的。当tab不活动时，浏览器会关闭rAF以节省电池之类的东西。如果你需要的话运动的一致性您需要锁定时间而不是帧（在大多数情况下通常更好）。@KenFyrstenberg感谢您的回答，这是否意味着我使用//var FPS=30；
禁用FPS？