Question

如何设置此HTML5动画的起点？

基本上我喜欢从屏幕按钮开始循环生产100px。

我是html5 canvas的初学者。也许有一个简单的解决方案。

非常感谢任何帮助！

window.requestAnimFrame = (function() {
  return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function(callback) {
      window.setTimeout(callback, 1000 / 60);
    };
})();

var c = document.getElementById('canv'),
    $ = c.getContext('2d');

    c.width = window.innerWidth;
    c.height = window.innerHeight;

window.addEventListener('resize', function(){
    c.width = window.innerWidth;
    c.height = window.innerHeight;
}, false);

var arr = [];

var go = function() {
  $.fillStyle = "hsla(0,0%,10%,.8)";
  $.fillRect(0, 0, c.width, c.height);
  
  var p = new Part(c.width/2 , c.height);
  p.vx = Math.random() * 10-5;
  arr.push(p);

  for (var i in arr) {
    var p = arr[i];
    p.disp($);
    p.upd();
  }

  if (arr.length > 500) {
    arr.shift();
  }
}

var rnd = function(min, max) {
  return Math.random() * (max - min) + min;
}

var Part = function(px, py) {
  this.px = px;
  this.py = py;
  this.vy = rnd(1.1, 2)*-8*1.1;
  this.vx = rnd(1.1, 2)*5*1.1;
  
  this.grav = 0.1;
  this.col = 0;
  this.rad = rnd(5,30);
  this.disp = function($) {
    $.fillStyle = "hsla(" + this.col + ", 95%, 60%, .8)";
    $.beginPath();
    $.arc(this.px, this.py, this.rad, 0, Math.PI*2);
    $.fill();
  }
    
    this.upd = function() {
      this.vy += this.grav;
      this.py += this.vy*1.1;
      this.px += this.vx* 1.1;
      this.col += 2;
  }
}

var run = function() {
  window.requestAnimFrame(run);
  go();

}
run();

body{
  width:100%; 
  margin:0;
  overflow:hidden;
  background:hsla(0,0%,10%,1);
}

<canvas id = 'canv'></canvas>

Answer 1

您希望动画从底部开始100px然后向下移动，或者从底部保持100px？

在go功能的内部，您可以看到c.width和c.height都来自窗口的H和W.然后将它们用于fillRect（背景）和p变量。 p包含new Part，其中必须包含粒子！这必须是我们必须使用c.height的地方。因此，从底部向上移动动画的最简单方法是从c.height中减去100，这意味着动画高度现在是窗口高度减去100像素。这使得var p = new Part(c.width/2 , c.height-100);看起来像你想要的那样。

修改HTML5动画

1 个答案: