Question

我正在为我们的内部应用程序构建一个花哨的easteregg。因此，我有一个图像＆＃39;骑＆＃39;通过屏幕。为了提高想象力，我想在图形后面的车辆上添加烟雾。

对于烟雾我实施了这支笔的修改版本： http://codepen.io/CucuIonel/pen/hFJlr

以下是结果： http://jsfiddle.net/vc2d08bt/4/

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

while

由于笔将烟雾绑定到光标偏移，我尝试将其绑定到跨度＆＃34;内部＆＃34;车辆，跟随。但烟雾在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);

帆布烟雾颗粒不动

1 个答案: