我是一名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();


这是结果



但是,当我将浏览器缩小到移动大小,然后将其扩展回正常大小时,它看起来像这样:

我正在尝试实现一个调整大小的函数和事件监听器:

   // 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;
    }


并在anim()之前调用它;但没有运气...

我怎样才能解决这个问题?

最佳答案

您只需要在事件侦听器中将canvas更改为c即可;

http://jsbin.com/zigoto/1/edit?js,output



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]
    distance = [50, 200],
    attenuator = 900,
    timeBetweenMoves = [6, 10],
    size = [0.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();

function resize() {
  w = window.innerWidth;
  h = window.innerHeight;
  c.width = w;
  c.height = h;
}

window.addEventListener('resize', resize);

html, body {
  overflow: hidden;
  width: 100%; height: 100%;
}
h1 {
  position: absolute;
  top: 50%; left: 50%;
  color: white;
  transform: translate(-50%, -50%)
}

<canvas id="c"></canvas>
<h1>HACKING</h1>

关于javascript - 调整功能 Canvas 的大小,将其加载到缩小的浏览器上并进行扩展,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/30688966/

10-11 22:12
查看更多