Question

我正在尝试放置.gif文件（用anmation说直升机），我可以将它放在画布上，但旋转的刀片不起作用。让我知道我错过了什么。

jsfiddle：jsfiddle.net/sajesh1985/ptsdvbrt /

由于 Sajesh

Answer 1

你的小提琴正在使用gif，但在任何一种情况下：

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

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

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

解决方案是准备一张精灵表，其中包含您想要制作动画的帧。以所需的间隔从中画出一个框架。

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画布中会丢失动画

1 个答案: