Javascript 画布烟雾粒子不移动

我正在为我们的内部应用程序构建一个精美的easteregg。因此，我有一个“骑”过屏幕的图像。为了增强想象力，我想在图中所示的车辆上添加烟雾

对于smoke，我实现了此笔的修改版本：

结果如下：

重要的代码片段（我猜）可以在fiddle中找到，搜索：

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

由于笔将烟绑定到光标偏移量，因此我尝试将其绑定到车辆“内部”的跨度上，以便跟随。但是烟雾在两个X方向上都在增长，甚至没有接近车辆

我做错了什么？我对canvas不是很熟悉，但感谢您的帮助

---

提前谢谢

我已将运动添加到汽车中，排气管冒出烟雾。在鼠标上移动，屏幕上移动，但如果您愿意，可以轻松更改。我将部分的情感方向改为Y，而不是X，所以它会向后移动带有发射器的汽车图像

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;

  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);

//将部分的方向改为向右，而不是向上

  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(){

//如果汽车开到终点，我就把它移回到起点

  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);

//将图像重新绘制到屏幕上

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;

  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);

c.drawImage（汽车，位置x，位置y-80250100）；
对于（var i=0；i

通过画布而不是CSS绘制移动的卡车。默认情况下，partials使用的画布是页面的大小。但是，它仍然是关于mousemove的。有没有可能在移动中设置动画而不绑定到鼠标？（就像在基于CSS3的运动示例中）我深深地属于你们部门！Canvas在大多数语言中都是一样的，你应该使用它，一旦你有了一个更新方法，它真的很有趣，是游戏设计的开始步骤之一。有可能在透明背景下使用它吗？如果我们将其设置为“透明”或“rgba（0,0,0,0）”，则表示扭曲。非常感谢。因为我们更喜欢bing，所以找不到任何有用的结果。再次感谢你！