.gif图像作为画布背景

Question

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

Answer 1

为什么不让画布透明，并将画布放置（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();

Answer 2

不，没有办法在<canvas>显示.gif 。 您可以使用精灵和setInterval()来模仿动画。

.gif图像作为画布背景

问题描述

2 个解决方案

解决方案1
2 2013-07-28 16:19:15

解决方案2
1 2013-07-28 15:32:30

.gif图像作为画布背景

问题描述

2 个解决方案

解决方案1 2 2013-07-28 16:19:15

解决方案2 1 2013-07-28 15:32:30

解决方案1
2 2013-07-28 16:19:15

解决方案2
1 2013-07-28 15:32:30