个人中心
gpt4 book ai didi

javascript - .gif 图像作为 Canvas 背景

转载 作者：行者123 更新时间：2023-11-30 12:59:10 25 4
gpt4 key购买 nike

我想将 .gif 图像设置为 Canvas 的背景图像，这样我就可以获得背景的动画 View 。但我只得到了显示在其上的静态图像。

这是我的 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>

最佳答案

为什么不让 Canvas 透明，并将 Canvas 放置(CSS 定位)在它上面？这不是比必须做低级成像的东西更好吗？

否则 canvas 一次只显示一个静态图像，当然您的 JavaScript 可以为它设置动画，但这不是静态的。

检查这个 fiddle : 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>

使用透明 Canvas 绘制 var canvas = document.getElementById(" Canvas "), context = canvas.getContext("2d");//创建 Canvas 上下文

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

something();

关于javascript - .gif 图像作为 Canvas 背景，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17909653/

25 4 0
文章推荐： javascript - 如何将对象属性传输到现有对象 JavaScript？
文章推荐： javascript - 具有视差滚动的全视口(viewport)高度图像
文章推荐： c# - Debug.Assert/Retry，32 位和 64 位的不同行为
文章推荐： 如果 CSS 值有条件，则为 Javascript
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com