.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图像作为画布背景

回答

相关问题