.gif圖像作爲畫布背景

我想設置一個.gif圖像作爲畫布的背景圖像，以便我可以獲得背景的動畫視圖。但是我只能看到顯示在其上的靜態圖像。.gif圖像作爲畫布背景

這是我的Windows 8應用程序的HTML代碼。

<body> 
    <canvas id="canvas"></canvas> 
    <img id="scream" src="images/gangam.gif" alt="The Scream" width="220" height="277"> 
</body> 
<script> 
    var canvas = document.getElementById("canvas"), 
     ctx = canvas.getContext("2d"); // Create canvas context                   

    function paintCanvas() { 
    ctx.fillStyle = "white"; 
    ctx.fillRect(0, 0, W, H); 
    var img = document.getElementById("scream"); 
    ctx.drawImage(img, W/2, H/2); 
    } 
</script>

來源

2013-07-28 Viswanatham Santosh

如果我的回答很有幫助，請將其標記爲已接受。 –

沒有，有沒有辦法顯示在<canvas>.gif。您可以使用sprites和setInterval()模仿動畫。

來源

2013-07-28 15:32:30

爲什麼不讓畫布變得透明，並將畫布置於CSS上方？這不是比做低級別成像的東西好嗎？

否則，canvas一次只顯示一個靜態圖像，當然你的JavaScript可以動畫它，但這不是靜態的。

檢查此琴： http://jsfiddle.net/pK7Xx/2/

CSS

#canvas, #scream { 
    width: 500px; 
    height: 212px; 
    position: relative; 
    display: block; 
} 

#canvas { 
    margin-top: -212px; 
}

HTML

<img id="scream" src="http://24.media.tumblr.com/tumblr_ma1wafniaA1rbonrno1_500.gif" alt="The Scream"> 
<canvas id="canvas"></canvas>

畫使用透明畫布 var canvas = document.getElementById（「canvas」）， context = canvas.getContext（「2d」）; //創建畫布上下文

function something() { 
context.font = "bold 25px sans-serif"; 
context.fillText("Hello!", 100, 43); 
} 

something();

來源

2013-07-28 16:19:15

代碼的這部分是做什麼的#canvas { margin-top：-212px; }我也希望製作一款遊戲，並且需要找出哪種方式是在畫布上動畫多個對象的最佳方式。我應該在同一個畫布上繪製所有對象，還是應該將它們移動到不同的畫布上。這是我一直想知道的事情。或者，我應該使用多個畫布，並使其全部透明，並將每個對象放在畫布上。這是做這件事的最好方法？ –

圖片如何讓自己的動畫看起來像男人跳躍和馬頭正在移動。 –

.gif圖像作爲畫布背景

回答

相關問題