javascript - 如何让这个 HTML canvas 动画出现在我的图像之上？

Question

堆栈和编码的新手，试图创建一个简化的侦探游戏(肯定是咬得太多了，但我还是决定试一试)。

这是代码的 codepen 链接:

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

*************** HTML *************************

无

************** CSS ***************************

body{
  background:#000;
  width: 100%;
  height: 100%;
  overflow:hidden;
}

******************JS *******************************

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

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

var background = new Image();
background.src = "https://i2.wp.com/i2.listal.com/image/2669447/500full.jpg";



var position = {x : w/3.2, y : h/2.5};

document.body.appendChild(canvas);

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

/*canvas.onmousemove = function(e){
 position.x = e.offsetX;
 position.y = e.offsetY;
};*/
function Particle(x, y){
 this.x = x;
 this.y = y;
 this.velY = -2;
 this.velX = (random(1, 10)-5)/10;
 this.size = random(3, 5)/10;
 this.alpha = 1;
 this.update = function(){
   c.drawImage(background,0,0);
   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(){
 var p = new Particle(position.x, position.y);
 particles.push(p);

 while(particles.length > 500) particles.shift();

 c.globalAlpha = 2;
 c.drawImage(background,0,0);
 c.fillRect(0,0,w,h);



 for(var i = 0; i < particles.length; i++)
 {
   particles[i].update();
 }
};

setInterval(draw, 1000/60);

在 codepen 上，如果您注释掉 JS 部分中的第 35 行，您会看到侦探图像后面有一个烟雾动画(当然是在 codepen 上找到的，并且认为它会制作一个很酷的吸烟动画)。我能够弄清楚如何将侦探图像放入 Canvas 中，但我无法弄清楚如何让烟雾动画出现在侦探图像的前面。我尝试了几种方法，包括在加载时设置 Javascript 图片，但在所有方法中，这是我能达到的最接近预期目标的方法。

我在这里做错了什么？

Answer 1

在绘制粒子之前先绘制背景图像:

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

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

var background = new Image();
background.src = "https://i2.wp.com/i2.listal.com/image/2669447/500full.jpg";



var position = {x : w/3.2, y : h/2.5};

document.body.appendChild(canvas);

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

/*canvas.onmousemove = function(e){
 position.x = e.offsetX;
 position.y = e.offsetY;
};*/
function Particle(x, y){
  this.x = x;
  this.y = y;
  this.velY = -2;
  this.velX = (random(1, 10)-5)/10;
  this.size = random(3, 5)/10;
  this.alpha = 1;
  this.update = function(){
    //c.drawImage(background,0,0);
    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(){
  var p = new Particle(position.x, position.y);
  particles.push(p);

  // draw the background image before you draw the particles
  c.drawImage(background,0,0);

  while(particles.length > 500) particles.shift();

  for(var i = 0; i < particles.length; i++)
  {
    particles[i].update();
  }

};

setInterval(draw, 1000/60);

body{ background-color: black; }
canvas{border:1px solid red; }