Question

我所拥有的是一个覆盖的帆布元素，浮动的粒子在屏幕周围反弹，旨在模仿漂浮的叶子和/或尘埃粒子。画布元素覆盖了风景秀丽的背景，当在移动设备上观看页面时，粒子看起来太大而不能被看作漂浮的叶子/灰尘，它们看起来像漂浮在周围的球，这阻碍了它们的叶子/灰尘的想象。 / p>

我想在浏览器屏幕小于600px时调整粒子大小，我不知道如何修改代码来执行此操作。

这是使用的JS：

(function() {
jQuery(function() {
var H, Particle, W, animateParticles, canvas, clearCanvas, colorArray, createParticles, ctx, drawParticles, initParticleSystem, particleCount, particles, updateParticles;
Particle = function() {
  this.color = colorArray[Math.floor((Math.random() * 5) + 1)];
  this.x = Math.random() * W;
  this.y = Math.random() * H;
  this.direction = {
    x: -1 + Math.random() * 2,
    y: -1 + Math.random() * 1
  };
  this.vx = 1 * Math.random() + .05;
  this.vy = 1 * Math.random() + .05;
  this.radius = .9 * Math.random() + 1;
  this.move = function() {
    this.x += this.vx * this.direction.x;
    this.y += this.vy * this.direction.y;
  };
  this.changeDirection = function(axis) {
    this.direction[axis] *= -1;
  };
  this.draw = function() {
    ctx.beginPath();
    ctx.fillStyle = this.color;
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
    ctx.fill();
  };
  this.boundaryCheck = function() {
    if (this.x >= W) {
      this.x = W;
      this.changeDirection("x");
    } else if (this.x <= 0) {
      this.x = 0;
      this.changeDirection("x");
    }
    if (this.y >= H) {
      this.y = H;
      this.changeDirection("y");
    } else if (this.y <= 0) {
      this.y = 0;
      this.changeDirection("y");
    }
  };
};
clearCanvas = function() {
  ctx.clearRect(0, 0, W, H);
};
createParticles = function() {
  var i, p;
  i = particleCount - 1;
  while (i >= 0) {
    p = new Particle();
    particles.push(p);
    i--;
  }
};
drawParticles = function() {
  var i, p;
  i = particleCount - 1;
  while (i >= 0) {
    p = particles[i];
    p.draw();
    i--;
  }
};
updateParticles = function() {
  var i, p;
  i = particles.length - 1;
  while (i >= 0) {
    p = particles[i];
    p.move();
    p.boundaryCheck();
    i--;
  }
};
initParticleSystem = function() {
  createParticles();
  drawParticles();
};
animateParticles = function() {
  clearCanvas();
  drawParticles();
  updateParticles();
  requestAnimationFrame(animateParticles);
};
W = void 0;
H = void 0;
canvas = void 0;
ctx = void 0;
particleCount = 100;
particles = [];
colorArray = ["rgba(65,61,11,.5)", "rgba(112,94,12,.6)", "rgba(129,123,114,.4)", "rgba(122,105,17,.5)", "rgba(188,188,188,.2)", "rgba(75,69,16,.5)", "rgba(136,107,13,.5)"];
W = window.innerWidth;
H = jQuery('.fullscreen-cover').height();
canvas = jQuery("#headerballs").get(0);
canvas.width = W;
canvas.height = H;
ctx = canvas.getContext("2d");
initParticleSystem();
requestAnimationFrame(animateParticles);
});

}).call(this);

Answer 1

调整窗口调整大小事件的半径。

@RunWith(Categories.class)
@Categories.IncludeCategory(FastTests.class)
@Suite.SuiteClasses( /* Your test classes here */)
public class FastTestSuite {
}

工作演示：http://jsfiddle.net/x5rwgcfv/3/

HTML5 Canvas Floating Particles响应式修复？

1 个答案: