Javascript 调整加载在收缩浏览器和展开浏览器上的功能画布的大小

我是一个javascript初学者，但我成功地制作了一个简单的函数，创建了一个动画画布

  var w = c.width = window.innerWidth,
  h = c.height = window.innerHeight,
  ctx = c.getContext('2d'),

  spawnProb = 1,
  numberOfMoves = [8, 16], //[min, max]
  distance = [50, 200],
  attenuator = 900,
  timeBetweenMoves = [6, 10],
  size = [.5, 3],

  lines = [],
  frame = (Math.random() * 360) | 0;

function rand(ar) {
  return Math.random() * (ar[1] - ar[0]) + ar[0];
}

function Line() {
  this.x = Math.random() * w;
  this.y = Math.random() * h;
  this.vx = this.vy = 0;
  this.last = {};
  this.target = {};
  this.totalMoves = rand(numberOfMoves);
  this.move = 0;
  this.timeBetweenMoves = rand(timeBetweenMoves);
  this.timeSpentThisMove = this.timeBetweenMoves;
  this.distance = rand(distance);

  this.color = 'hsl(hue, 80%, 50%)'.replace('hue', frame % 360);

  this.size = rand(size);
}
Line.prototype.use = function() {
  ++this.timeSpentThisMove;
  if (this.timeSpentThisMove >= this.timeBetweenMoves) {
    ++this.move;
    this.timeSpentThisMove = 0;

    var rad = Math.random() * 2 * Math.PI;
    this.target.x = this.x + Math.cos(rad) * this.distance;
    this.target.y = this.y + Math.sin(rad) * this.distance;
  }

  this.last.x = this.x;
  this.last.y = this.y;

  this.vx += (this.x - this.target.x) / attenuator;
  this.vy += (this.y - this.target.y) / attenuator;

  this.x += this.vx;
  this.y += this.vy;

  ctx.lineWidth = this.size;
  ctx.strokeStyle = ctx.shadowColor = this.color;
  ctx.beginPath();
  ctx.moveTo(this.last.x, this.last.y);
  ctx.lineTo(this.x, this.y);
  ctx.stroke();
}

function anim() {
  window.requestAnimationFrame(anim);

  ++frame;

  ctx.shadowBlur = 0;
  ctx.fillStyle = 'rgba(0, 0, 0, .04)';
  ctx.fillRect(0, 0, w, h);
  ctx.shadowBlur = 20;

  if (Math.random() < spawnProb) lines.push(new Line);

  for (var i = 0; i < lines.length; ++i) {
    lines[i].use();

    if (lines[i].move >= lines[i].totalMoves) {
      lines.splice(i, 1);
      --i;
    }
  }
}
anim();

在动画之前调用它（）；但是没有运气

---

如何修复此问题？

您只需在事件侦听器中将

画布更改为
c



var c=document.getElementById（'c'），
largeHeader=document.getElementById（'h'）；
var w=c.width=window.innerWidth，
h=c.height=window.innerHeight，
ctx=c.getContext（'2d'），
spawnProb=1，
numberOfMoves=[8,16]，//[min，max]
距离=[50200]，
衰减器=900，
timeBetweenMoves=[6,10]，
大小=[0.5,3]，
行=[]，
frame=（Math.random（）*360）| 0；
函数rand（ar）{
返回Math.random（）*（ar[1]-ar[0]）+ar[0]；
}
函数行（）{
this.x=Math.random（）*w；
this.y=Math.random（）*h；
this.vx=this.vy=0；
this.last={}；
this.target={}；
this.totalMoves=rand（numberOfMoves）；
这个.move=0；
this.timeBetweenMoves=rand（timeBetweenMoves）；
this.timeSpentThisMove=this.timebetweenmove；
this.distance=rand（距离）；
this.color='hsl（色调，80%，50%）'。替换（'hue'，帧%360）；
this.size=rand（size）；
}
Line.prototype.use=函数（）{
++这一步,；
如果（this.timeSpentThisMove>=this.timebetweenmove）{
++这个动作；
this.timeSpentThisMove=0；
var rad=Math.random（）*2*Math.PI；
this.target.x=this.x+Math.cos（rad）*this.distance；
this.target.y=this.y+Math.sin（rad）*this.distance；
}
this.last.x=this.x；
this.last.y=this.y；
this.vx+=（this.x-this.target.x）/衰减器；
this.vy+=（this.y-this.target.y）/衰减器；
this.x+=this.vx；
this.y+=this.vy；
ctx.lineWidth=这个.size；
ctx.strokeStyle=ctx.shadowColor=this.color；
ctx.beginPath（）；
移动到（this.last.x，this.last.y）；
ctx.lineTo（this.x，this.y）；
ctx.stroke（）；
};
函数anim（）{
window.requestAnimationFrame（动画）；
++框架；
ctx.shadowBlur=0；
ctx.fillStyle='rgba（0,0,0,04）'；
ctx.fillRect（0,0,w,h）；
ctx.shadowBlur=20；
if（Math.random（）=行[i].totalMoves）{
线。拼接（i，1）；
--一,；
}
}
}
动漫（）；
函数resize（）{
w=窗宽；
h=窗内高度；
c、 宽度=w；
c、 高度=h；
}
window.addEventListener（'resize'，resize）
html，正文{
溢出：隐藏；
宽度：100%；高度：100%；
}
h1{
位置：绝对位置；
顶部：50%；左侧：50%；
颜色：白色；
转换：转换（-50%，-50%）
}

黑客
你可以问创建者：P
   // Event handling
    function addListeners() {
        // window.addEventListener('resize', resize);
    }

    function resize() {
        w = window.innerWidth;
        h = window.innerHeight;
        largeHeader.style.height = h+'px';
        canvas.width = w;
        canvas.height = h;
    }