畫布上的圖像

Question

我想放置畫布上的圖像。畫布的大小必須與圖像相同。這裏是我的代碼：

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(); 
 
\t \t this.Sprite.src = "http://s.cdn.gaiaonline.com/images/thumbnails/85449184bbb9.png"; 
 
    \t this.Rotation = 0; 
 
} 
 

 
var particles = new Array(); 
 

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

 
function draw() 
 
{ 
 
ctx.clearRect(0, 0, c.width, c.height) 
 
    
 
\t 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); 
 
\t \t \t ctx.rotate(particle.Rotation); 
 
\t \t \t 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%>

現在畫布不包括圖片，剛好位於其上方。尺寸不適合圖片。請幫幫我。

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(); 
 
\t \t this.Sprite.src = "http://s.cdn.gaiaonline.com/images/thumbnails/85449184bbb9.png"; 
 
    \t this.Rotation = 0; 
 
} 
 

 
var particles = new Array(); 
 

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

 
function draw() 
 
{ 
 
ctx.clearRect(0, 0, c.width, c.height) 
 
    
 
\t 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); 
 
\t \t \t ctx.rotate(particle.Rotation); 
 
\t \t \t 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>