Question

我尝试将gif图像添加到画布中，添加后，gif是静态的，但是当我更改其他一些对象属性，即Kinetic.Text(); s setY()属性时，gif图像移动到另一个步骤动画。

无论如何，如何将 gif图片添加到图层然后使用

stage.toDataURL({
    callback: function(dataUrl) {
        //callback
    })
});

保存为gif图像？或者确实存在如何实现这种效果的任何不同机制？

Answer 1

如果要将第一个图像保存为动画.gif，可以将其绘制到屏幕外画布，然后使用context.getDataURL获取第一个图像的dataUrl：

示例代码和演示：http://jsfiddle.net/m1erickson/53Jw4/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>
<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var img=new Image();
    img.crossOrigin="anonymous";
    img.onload=start;
    img.src="https://dl.dropboxusercontent.com/u/139992952/multple/animated.gif";
    function start(){
        ctx.drawImage(img,0,0);
        var url=canvas.toDataURL();
    }

}); // end $(function(){});
</script>
</head>
<body>
    <h4>The animated .gif in an img element</h4>
    <img src="https://dl.dropboxusercontent.com/u/139992952/multple/animated.gif"><br>
    <h4>The animated .gif drawn in a canvas element</h4>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

使用gif图像并保存

1 个答案: