将 GIF 文件放入 HTML5 canvas 丢失动画

Question

我正在尝试放置 .gif 文件（带有动画，比如直升机），我可以将其放置在 canvas 中，但旋转叶片不起作用。让我知道我错过了什么。

jsfiddle: jsfiddle.net/sajesh1985/ptsdvbrt/

谢谢萨杰什

Answer 1

您的 fiddle 显示使用了 gif，但无论哪种情况：

当 SVG 是 DOM 的一部分时，带有 SMIL 动画的 SVG 文件可以直接由浏览器驱动。

当您使用 drawImage() 并将 SVG 作为源时，SVG 将需要被光栅化，当发生这种情况时，动画将被忽略并且 SVG 在其初始位置绘制。绘制时，光栅化像素与任何其他已经存在的像素混合在一起 - 没有分离，因为 canvas 只是一个位图。

同样适用于gif文件，只考虑第一帧。

解决方案是准备一个 sprite-sheet，其中包含您要设置动画的帧。以所需的间隔从中绘制一帧。

var isvg = document.getElementById("svg").outerHTML;
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
var svg = new Blob([isvg], {type: "image/svg+xml;charset=utf-8"});
var url = URL.createObjectURL(svg);
var img = new Image();
img.onload = draw;
img.src = url;

// this will always draw the SVG in initial position
function draw() {
  setInterval(function() {
    ctx.drawImage(img, 0, 0)
  }, 33);
}

canvas {border: 1px solid #000}

<canvas id=canvas width=300 height=100></canvas><br>

<svg id="svg" xmlns="http://www.w3.org/2000/svg" width="300px" height="100px">
  <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" />
  <circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1">
    <animateMotion path="M 0 0 H 300 Z" dur="3s" repeatCount="indefinite" />
  </circle>
</svg>

将 GIF 文件放入 HTML5 canvas 丢失动画

Placing GIF file in HTML5 canvas lose animation

html5-canvas