动画easelJS.js用于动画,向量和位图的绘制?

CreateJS 是一套可以构建丰富交互体验的 HTML5 游戏的开源工具包,旨在降低 HTML5 项目的开发难度和成本,让开发者以熟悉的方式打造更具现代感的网络交互体验。
CreateJS 中包含:
EaselJS:用于 Sprites、动画、向量和位图的绘制,创建 HTML5 Canvas 上的交互体验(包含多点触控),同时提供 Flash 中的“显示列表”功能。
TweenJS:一个简单的用于制作类似 Flash 中“补间动画”的引擎,可生成数字或非数字的连续变化效果。
SoundJS:一个音频播放引擎,能够根据浏览器性能选择音频播放方式。将音频文件作为模块,可随时加载和卸载。
PrloadJS:帮助你简化网站资源预加载工作,无论加载内容是图形、视频、声音、JS、数据……
以上的Createjs介绍来自百度,不过通过介绍可以知道,虽然CreateJS看起来复杂,不过四个部分各有作用,其中最主要的就是EaselJS,其余三项不过是为他服务。
一.如何使用EaselJS

 首先到http://createjs.com/ 下载最新版的EaselJS,下载解压后可以在lib文件夹中找到easeljs-0.8.1.min.js,同时在压缩包中可以找到一个examples和tutorials目录,这两个目录中包含一些入门介绍和例子,有英语基础可以看看,DOC文件夹中包含easeljs所有的api。(同理,可以得到createjs包含的其他三项,其目录结构都与EaselJS相似)。

1.得到easeljs-0.8.1.min.js后,新建一个HTML5文件并导入之:

 <script src="easeljs-0.8.1.min.js"></script>   

 2.入口函数和创建canvas标签

[html] 
 <body onload="init();">  

    <canvas id="game" width="1000" height="700" style="background-color: white"></canvas>  

</body

3.编写自己的javascript代码,在函数init()中首先应该使用HTML中的canvas标签来创建一个Stage,createjs中用到的所有元素,都是添加在这个stage当中的,添加后调用stage.update()方法即可使得添加的元素显示在页面上。在创建Stage时,可以直接使用Canvas的id来创建,也可以调用document.getElementById("game"),选取canvas来创建,没有区别。

  <script>  
function init(){  
var stage = new createjs.Stage("game");  
        .......  

        stage.update();  

    }  

</script>  

posted on 2018-05-08 16:36  向往回得来  阅读(677)  评论(0编辑  收藏  举报

导航