使用方法：
 
 
代码：
<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

    <!--<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1,minimum-scale=1,maximum-scale=1" />-->

    <title>Fanvas Demo</title>

    <!-- Note: All core fanvas classes are listed here: -->

    <script type="text/javascript" src="fanvas3-min.js"></script>

    <script type="text/javascript" src="swfData.js"></script>

    <script>

        function init() {

            setTimeout(function(){

                var canvas = document.getElementById("testCanvas");

//                alert(window.innerWidth + ' ' + window.innerHeight);

//                swfData.frameRate = 12;

                canvas.style.width = window.innerWidth + 'px';     //css控制最终实际显示的尺寸

                canvas.style.height = window.innerHeight + 'px';

                fanvas.play("testCanvas", swfData, {

                    cache: 2, autoPlay: true,

                    onFrame: function (index) {

                        //                    console.log("onFrame", index);

                        //                    if(index == 3){

                        //                        fanvas.pause("testCanvas");

                        //                        setTimeout(function(){

                        //                            fanvas.resume("testCanvas");

                        //                            fanvas.replay("testCanvas");

                        //                        }, 2000);

                        //                    }

                    },

                    //showFPS: 1,

                    scale: 1,

                    //clearAll: 1,

                    //showDirtyRect: 1,

                    imagePath: "./img/"

                });

            }, 100);

        }

    </script>

</head>

<body onload="init();">

<div style="position:absolute;left:0;top:0;" class="canvasHolder">

    <canvas id="testCanvas" width="1000" height="800" ></canvas>

</div>

</body>

</html>

效果：

 
 
 
 
 
 

Fanvas是一个把swf转为html5 canvas动画的系统的更多相关文章

  1. 7 个顶级的 HTML5 Canvas 动画赏析

    HTML5确实是一项改革浏览器乃至整个软件行业的新技术,它可以帮助我们Web开发者很方便地在网页上实现动画特效,而无需臃肿的Flash作为支撑.本文分享7个顶级的HTML5 Canvas 动画,都有非 ...

  2. 8个经典炫酷的HTML5 Canvas动画欣赏

    HTML5非常强大,尤其是Canvas技术的应用,让HTML5几乎可以完成所有Flash能完成的效果.本文精选了8个经典炫酷的HTML5 Canvas动画欣赏,每一个都提供全部的源代码,希望对你有所帮 ...

  3. 7个惊艳的HTML5 Canvas动画效果及源码

    HTML5非常强大,尤其是现在大部分浏览器都支持HTML5和CSS3,用HTML5制作的动画也多了起来.另外,Canvas上绘制图形非常简单,本文就分享了一些强大的HTML5 Cnavas动画,一起来 ...

  4. HTML5 Canvas动画效果演示

    HTML5 Canvas动画效果演示 主要思想: 首先要准备一张有连续帧的图片,然后利用HTML5 Canvas的draw方法在不同的时间 间隔绘制不同的帧,这样看起来就像动画在播放. 关键技术点: ...

  5. HTML5 Canvas动画效果实现原理

    在线演示 使用HTML5画布可以帮助我们高速实现简单的动画效果.基本原理例如以下: 每隔一定时间绘制图形而且清除图形,用来模拟出一个动画过程,能够使用context.clearRect(0, 0, x ...

  6. [js高手之路]html5 canvas动画教程 - 边界判断与小球粒子模拟喷泉,散弹效果

    备注:本文后面的代码,如果加载了ball.js,那么请使用这篇文章[js高手之路] html5 canvas动画教程 - 匀速运动的ball.js代码. 本文,我们要做点有意思的效果,首先,来一个简单 ...

  7. 16个富有创意的HTML5 Canvas动画特效集合

    HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...

  8. 分享8款令人惊叹的HTML5 Canvas动画特效

    HTML5的确可以制作出非常绚丽的网页动画效果,尤其是利用HTML5 Canvas特性和HTML5 3D特性,我们更加可以欣赏到超酷的动画特效.今天我从html5tricks网站上整理了8款令人惊叹的 ...

  9. 16个非常有趣的HTML5 Canvas动画特效集合

    HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...

随机推荐

  1. ASP.NET中Onclick和OnserverClick事件的区别 (转)

    对于服务器按钮控件(即<asp:Button>类型的按钮): 服务器响应事件:OnClick 客户端响应属性:OnClientClick 对于html按钮控件(即<input typ ...

  2. vsftp -samba-autofs

    摘要: 1.FTP文件传输协议,PAM可插拔认证模块,TFTP简单文件传输协议. 注意:iptables防火墙管理工具默认禁止了FTP传输协议的端口号 2.vsftpd服务程序三种认证模式?三种认证模 ...

  3. C/C++,python,java,C#月经贴问题

    在刚开始的时候,一直纠结于语言之争,什么什么有前途,什么什么没前途.对于什么的支持不好啦,个人信仰问题啦.什么都有. 首先最主要的一个个人观点:“语言不是老婆,不是一夫一妻制”.你可以同时拥有许多的女 ...

  4. GO学习笔记 - 变量在定义时没有明确的初始化时会赋值为“零值 ”。

    官方教程:https://tour.go-zh.org/basics/12 变量在定义时没有明确的初始化时会赋值为 零值 . 零值是: 数值类型为 0 , 布尔类型为 false , 字符串为 &qu ...

  5. Delphi开发安卓程序的感受

    Delphi XE7开发安卓程序,界面开发速度非常快,这是eclipse无法比的,还有就是界面自适应能力很棒,我在不同版本和尺寸的设备中测试,运行良好,这些设备包括:三星I9100(安卓2.3:不到5 ...

  6. git log 与 git reflog 的 区别

    git log: commit 的版本日志 包含提交的版本 操作者 日期 (方便查看commit的版本,但是版本回退后,使用git log 看不到回退版本号之后的版本记录) commit ce0d69 ...

  7. JavaScript求数组Array的并集（javascript面试常见题目）

    var Utils = { joinArray:function(source,target){ for(var i = 0;i<source.length;i++){ var oa = sou ...

  8. 基于注解的Spring容器源码分析

    从spring3.0版本引入注解容器类之后,Spring注解的使用就变得异常的广泛起来,到如今流行的SpringBoot中,几乎是全部使用了注解.Spring的常用注解有很多,有@Bean,@Comp ...

  9. Java中关键字final用法

    ///首先声明,本文转载自博客园的海子,链接:http://www.cnblogs.com/dolphin0520/p/3736238.html 浅析Java中的final关键字 谈到final关键字 ...

  10. day 28 :进程相关,进程池,锁,队列,生产者消费者模式

    ---恢复内容开始--- 前情提要: 一:进程Process  1:模块介绍 from multiprocessing import Process from multiprocessing impo ...