zoukankan      html  css  js  c++  java
  • 动画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>  

  • 相关阅读:
    永无乡「HNOI2012」
    ruby基础知识之 class&module
    Linux命令集锦
    Ruby知识总结-一般变量+操作符+if+数组和哈希
    VMware通过VMnet8共享本地网络
    VMware Workstation 不可恢复错误 (vcpu-0)
    WIN10安装时msxml4.0提示2502、2503解决办法
    C# 委托知识总结
    request.servervariables参数
    判断MS SQLSERVER临时表是否存在
  • 原文地址:https://www.cnblogs.com/duanzhange/p/9009167.html
Copyright © 2011-2022 走看看