.gif 图像作为画布背景答案

【问题标题】：.gif image as canvas background.gif 图像作为画布背景
【发布时间】：2013-07-29 00:30:52
【问题描述】：

我想将 .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>

【问题讨论】：

如果我的回答有帮助，请将其标记为已接受。

标签： javascript html canvas background

【解决方案1】：

为什么不让画布透明，并在其上方放置（CSS 定位）画布？这难道不比做低级成像更好吗？

否则画布一次只显示一个静态图像，当然您的 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"), 上下文 = canvas.getContext("2d"); // 创建画布上下文

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

something();

【讨论】：

这部分代码是做什么的 #canvas { margin-top: -212px;我也正在寻找制作游戏，需要找出在画布上为多个对象设置动画的最佳方式。我应该在同一个画布上绘制所有对象还是应该将它们移动到不同的画布上。这是我一直想知道的事情。或者我应该使用多个画布并使它们全部透明并将每个对象都放在画布上。哪种方法最好？
图像如何保持动画效果，让他看起来像是在跳跃，马头在移动。

【解决方案2】：

不，无法在<canvas> 中显示.gif。您可以使用sprites 和setInterval() 来模仿动画。

【讨论】：