javascript - 图像上的 Canvas

Question

我想在图像上放置 Canvas 。并且 Canvas 的大小必须与图像相同。这是我的代码:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

var Particle = function(xSet, ySet)
{
    this.XPos = xSet;
    this.YPos = ySet;
    this.Sprite = new Image();
		this.Sprite.src = "http://s.cdn.gaiaonline.com/images/thumbnails/85449184bbb9.png";
  	this.Rotation = 0;
}

var particles = new Array();

for(var i = 0; i < 10; i++){
	particles.push(new Particle(Math.random()*c.width, Math.random()*c.height));
}

function draw()
{
 ctx.clearRect(0, 0, c.width, c.height)
  
	for(var i = 0; i < particles.length; i++)
    {
      var particle = particles[i];
      particle.YPos += 1;
      
      // Draw image rotated
      ctx.save();

      ctx.save();
      ctx.translate(particle.XPos + particle.Sprite.width / 2, particle.YPos + particle.Sprite.height / 2);
			ctx.rotate( particle.Rotation );
			ctx.translate(-(particle.XPos + (particle.Sprite.width / 2)), -(particle.YPos));
      ctx.drawImage(particle.Sprite, particle.XPos, particle.YPos);
      ctx.restore();

      ctx.restore();
      
      if(particle.YPos > c.height)
        {
          particle.YPos = 0;
          particle.XPos = Math.random()*c.width;
        }
      
      particle.Rotation += 0.01;
    }
}

setInterval(draw, 3);

#myCanvas{

}

<canvas id="myCanvas" width="100%" height="100%"></canvas>
<img src="http://krishna73.ru/images/back2.jpg" width=100%>

现在 Canvas 不覆盖图片，而是位于其上方。而且尺寸与图片不符。请帮我。

Answer 1

试试这个:

var container = document.getElementById("container"),
    image     = document.getElementById("image"),
            c = document.getElementById("myCanvas"),
          ctx = c.getContext("2d");

container.style["height"] = image.height;
container.style["width"]  = image.width;

c.setAttribute("height", image.height);
c.setAttribute("width", image.width);

应用以下 CSS

.canvas-image-container {
  position:relative;
}
.canvas-image-container #myCanvas {
  position:absolute;
  top:0;
  left:0;
  z-index:9;
}

var container = document.getElementById("container"),
    image     = document.getElementById("image"),
            c = document.getElementById("myCanvas"),
          ctx = c.getContext("2d");


container.style["height"] = image.height;
container.style["width"]  = image.width;

c.setAttribute("height", image.height);
c.setAttribute("width", image.width);


var Particle = function(xSet, ySet)
{
    this.XPos = xSet;
    this.YPos = ySet;
    this.Sprite = new Image();
		this.Sprite.src = "http://s.cdn.gaiaonline.com/images/thumbnails/85449184bbb9.png";
  	this.Rotation = 0;
}

var particles = new Array();

for(var i = 0; i < 40; i++){
	particles.push(new Particle(Math.random()*c.width, Math.random()*c.height));
}

function draw()
{
 ctx.clearRect(0, 0, c.width, c.height)
  
	for(var i = 0; i < particles.length; i++)
    {
      var particle = particles[i];
      particle.YPos += 1;
      
      // Draw image rotated
      ctx.save();

      ctx.save();
      ctx.translate(particle.XPos + particle.Sprite.width / 2, particle.YPos + particle.Sprite.height / 2);
			ctx.rotate( particle.Rotation );
			ctx.translate(-(particle.XPos + (particle.Sprite.width / 2)), -(particle.YPos));
      ctx.drawImage(particle.Sprite, particle.XPos, particle.YPos);
      ctx.restore();

      ctx.restore();
      
      if(particle.YPos > c.height)
        {
          particle.YPos = 0;
          particle.XPos = Math.random()*c.width;
        }
      
      particle.Rotation += 0.01;
    }
}

setInterval(draw, 3);

.canvas-image-container {
  position:relative;
  width:100%;
  height:100%;
  display:block;
}
.canvas-image-container #myCanvas {
  position:absolute;
  top:0;
  left:0;
  z-index:9;
}

<div class="canvas-image-container" id="container">
    <canvas id="myCanvas" width="100%" height="100%"></canvas>
    <img src="http://krishna73.ru/images/back2.jpg" id="image">
</div>