帆布煙霧顆粒不移動

Question

我正在為我們的內部應用程序構建一個精美的Easteregg。 因此，我在屏幕上有一個圖像“騎行”。 為了提高想象力，我想向跟隨圖形的車輛添加煙霧。

對於煙霧，我實現了這支筆的修改版本： http : //codepen.io/CucuIonel/pen/hFJlr

結果如下： http : //jsfiddle.net/vc2d08bt/4/

可以在小提琴中找到重要的代碼片段（據我猜），請搜索：

setInterval(function () {
    position.x = $('#crystalship_exhaust').offset().left;
    position.y = $('#crystalship_exhaust').offset().top;
}, 100);

由於筆將煙霧綁定到光標偏移處，因此我嘗試將其綁定到車輛“內部”的跨度。 但是，煙霧在兩個X方向上都在增長，甚至無法跟隨車輛。

我在這里做錯了什么？ 我對畫布不是很熟悉，但是非常感謝您的幫助。

提前致謝！

Answer 1

我將機芯加入了汽車，使廢氣中有煙冒出來。 用鼠標在屏幕上移動，但是如果您願意，可以輕松更改。 我將零件的情感方向更改為Y而不是X，這樣它向后移動並用發射器移動了汽車的圖像。

http://codepen.io/anon/pen/JYapqr

Javascript ：

var canvas = document.createElement('canvas');
var w = canvas.width = 1200,
    h = canvas.height = 700;
var c = canvas.getContext('2d');

var img = new Image();

//添加了新的汽車圖片

var car = new Image();
img.src = 'http://oi41.tinypic.com/4i2aso.jpg';

//並設置它的src屬性

car.src = 'https://openmerchantaccount.com/img2/crystalship.png';

//將起始位置設置為-car length，以便它不僅出現在屏幕上

var position = {x : -250, y : h/2};

document.body.appendChild(canvas);

var particles = [];
var random = function(min, max){
  return Math.random()*(max-min)*min;
};

function Particle(x, y){
  this.x = x;
  this.y = y;

//將部分的方向更改為右移，而不是向上。

  this.velX = -2;
  this.velY = (random(1, 10)-5)/10;
  this.size = random(3, 5)/10;
  this.alpha = 1;
  this.update = function(){
    this.y += this.velY;
    this.x += this.velX;
    this.velY *= 0.99;
    if(this.alpha < 0)
      this.alpha = 0;
    c.globalAlpha = this.alpha;
    c.save();
    c.translate(this.x, this.y);
    c.scale(this.size, this.size);

    c.drawImage(img, -img.width/2, -img.height/2);
    c.restore();
    this.alpha *= 0.96;
    this.size += 0.02;//
  };
}

var draw = function(){

//要設置動畫，請在繪制時向右移動2px

  position.x+=2;
  position.y;

//如果汽車到達終點，我只需將其移回起點

  if(position.x+250>w){
    position.x=-250;
  }

  var p = new Particle(position.x, position.y);
  particles.push(p);
  while(particles.length > 500) particles.shift();

  c.globalAlpha = 1;
  c.fillStyle = '#000';
  c.fillRect(0,0,w,h);

//在屏幕上繪制圖像

  c.drawImage(car, position.x,position.y-80,250,100);
  for(var i = 0; i < particles.length; i++)
  {
    particles[i].update();
  }
};

setInterval(draw, 1000/60);