canvas框架::createjs入门
createjs是一个轻量级的框架,稍微有点时间和耐心,就可以把全部源代码都看一遍,毕竟只有三十几个js文件。地址:http://www.createjs.com/
开发createjs的动画或游戏,没有重型的IDE或什么工具支持,我们只能从零开始写js。一方面,这样对于jser来说,足够灵活;另外一方面,createjs因此足够精简足够小。
createjs由几个库组成:
l easeljs,这个是核心,包括了显示列表、事件机制;
l preloadjs,用于预加载图片等;
l tweenjs,用于控制元件的缓动;
l soundjs,用于播放声音。
easeljs 81k,preloadjs 31k,soundjs 34k,tweenjs 18k,对于手机小动画或小游戏,其实只需要加载easeljs即可,因为核心库已经涵盖了简单图片的预加载功能。
开发步骤:
1、 下载类库,可以使用源代码,也可以使用压缩过的min.js,就好像平时写网页一样。
2、 建立html和canvas标签,onload后再执行createjs相关逻辑。
3、 编写createjs逻辑。这个非常简单,因为createjs只提供了最简单的基础功能,我们理解了基础功能后就可以叠积木了。
关于createjs,最关键是要理解类结构
上图列出了createjs的主要类结构,所有舞台上的内容都是元件,元件的基类是DisplayObject。Container可以包含子元件,舞台Stage本身也是Container。另外Sprite用于表现SpriteSheet帧动画人物、Bitmap用于展示纯静态的人物。
而Filter和Shadow则是滤镜分支,可以针对任意元件实现颜色变换、模糊、阴影等效果。使用滤镜的方式跟Flash一致,需要新建Filter实例,添加到目标元件的FilterList中,Createjs框架在下一帧就会把该元件加上滤镜效果。
下边以一个例子概要学习一下Createjs的使用:
<script type="text/javascript"> var stage; function init() { var canvas = document.getElementById("testCanvas"); stage = new createjs.Stage(canvas); stage.autoClear = true; //添加背景图 var bg = new createjs.Bitmap("../res/bg.jpg"); stage.addChild(bg); //增加5个小人,不断做旋转和放缩 for (var i = 0; i < 5; i++) { var man = new createjs.Bitmap("../res/grossini.png"); man.regX = 42; man.regY = 60; man.x = canvas.width/6*(i+1); man.y = canvas.height/5*4; man.scaleX = man.scaleY = 1; stage.addChild(man); createjs.Tween.get(man, {loop: true}, true) .to({rotation: 360, scaleX:2, scaleY:2}, 1000).to({rotation: 360, scaleX:1, scaleY:1}, 1000); man.addEventListener("click", function(event) { console.log("click", event.currentTarget); }); //监听点击非常方便,位图的透明区域忽略鼠标事件 } var images = []; for (var i = 1; i <= 14; i++) { images.push("../res/grossini_dance_" + (i<10?("0"+i):i) + ".png"); } //增加5个帧动画小人,不断播放14帧画面 for (var j = 0; j < 5; j++) { var sheet = new createjs.SpriteSheet({ images: images, frames: {width: 85, height: 121, regX: 42, regY: 60} }); //需要设置每帧的宽高,注册点信息 var man = new createjs.Sprite(sheet); man.framerate = 60/7; man.x = canvas.width/6*(j+1); man.y = canvas.height / 3; man.play(); stage.addChild(man); } stage.update(); createjs.Ticker.setFPS(60); createjs.Ticker.addEventListener("tick", tick); } //这里有点猥琐,需要用户自行控制舞台不断update更新 function tick(event) { stage.update(event); } </script>
canvas框架::createjs入门的更多相关文章
- html5 Canvas绘制图形入门详解
html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...
- Springmvc整合tiles框架简单入门示例(maven)
Springmvc整合tiles框架简单入门示例(maven) 本教程基于Springmvc,spring mvc和maven怎么弄就不具体说了,这边就只简单说tiles框架的整合. 先贴上源码(免积 ...
- OkHttp框架从入门到放弃,解析图片使用Picasso裁剪,二次封装OkHttpUtils,Post提交表单数据
OkHttp框架从入门到放弃,解析图片使用Picasso裁剪,二次封装OkHttpUtils,Post提交表单数据 我们这片博文就来聊聊这个反响很不错的OkHttp了,标题是我恶搞的,本篇将着重详细的 ...
- Spring.NET依赖注入框架学习--入门
Spring.NET依赖注入框架学习--入门 在学些Spring.net框架之前,有必要先脑补一点知识,比如什么是依赖注入?IOC又是什么?控制反转又是什么意思?它们与Spring.net又有什么关系 ...
- 框架-spring入门总结
框架-spring入门总结 参考: http://www.cnblogs.com/heavenyes/p/3908546.html http://www.cnblogs.com/heavenyes/p ...
- MvvmLight框架使用入门(四)
本篇我们着重介绍ViewModelBase,演示Set和RaisePropertyChanged方法的使用,以及就Cleanup方法释放资源展开讨论. ICleanup 接口.实现该接口的ViewMo ...
- MvvmLight框架使用入门(三)
本篇是MvvmLight框架使用入门的第三篇.从本篇开始,所有代码将通过Windows 10的Universal App来演示.我们将创建一个Universal App并应用MvvmLight框架. ...
- node.js Web应用框架Express入门指南
node.js Web应用框架Express入门指南 作者: 字体:[增加 减小] 类型:转载 时间:2014-05-28 我要评论 这篇文章主要介绍了node.js Web应用框架Express入门 ...
- Surging 分布式微服务框架使用入门
原文:Surging 分布式微服务框架使用入门 前言 本文非 Surging 官方教程,只是自己学习的总结.如有哪里不对,还望指正. 我对 surging 的看法 我目前所在的公司采用架构就是类似与S ...
- Surging 微服务框架使用入门
原文:Surging 微服务框架使用入门 前言 本文非 Surging 官方教程,只是自己学习的总结.如有哪里不对,还望指正. 我对 surging 的看法 我目前所在的公司采用架构就是类似与Sur ...
随机推荐
- centOS7 下安装smb服务器
转载自:http://www.cnblogs.com/lgh344902118/p/7503620.html centOS7和windows10 samba是一款可以让linux和windows下共享 ...
- PHP中使用CURL模拟登录并获取数据实例
cURL 是一个功能强大的PHP库,使用PHP的cURL库可以简单和有效地抓取网页并采集内容,设置cookie完成模拟登录网页,curl提供了丰富的函数,开发者可以从PHP手册中获取更多关于cURL信 ...
- linux的hostname(主机名)修改详解
Linux操作系统的hostname是一个kernel变量,可以通过hostname命令来查看本机的hostname.也可以直接cat /proc/sys/kernel/hostname查看. #ho ...
- DCL,即Double Check Lock,中卫双重检查锁定。
DCL,即Double Check Lock,中卫双重检查锁定. [Java并发编程]之十六:深入Java内存模型——happen-before规则及其对DCL的分析(含代码) 关于单例.关于DCL: ...
- centos shell 编程-通过端口号kill对应的进程
centos shell 编程-通过端口号kill对应的进程 方式一.端口固定 ------------------killportprocess.sh fSum() { pid=$(lsof ...
- puppet的使用:安装puppet
最近项目要使用puppet,趁机赶紧学习下. 在家里的机器中搭建puppet环境,使用两台ubuntu 14.04: 准备工作 时间同步 两台设备先进行时间同步,我把要安装master的机器作为NTP ...
- Mac OS配置Android SDK环境变量(当不存在 .bash_profile 文件的时候)
苹果系统已经包含完整的J2SE,其中就有JDK和JVM(苹果叫VM). 如果要在MAC系统下开发CODE.可以先装个IDE(NETBEANS/Eclipse等),而后不需要装JDK和JVM了,MAC下 ...
- R语言-RStudio快捷键总结
一.控制台 功能 Windows & Linux Mac 移动鼠标到控制台 Ctrl+2 Ctrl+2 移动到鼠标命令编辑 Ctrl+1 Ctrl+1 控制台清屏 Ctrl+L Comm ...
- 利用ggplot2画出各种漂亮图片详细教程
1.Why use ggplot2 ggplot2是我见过最human friendly的画图软件,这得益于Leland Wilkinson在他的著作<The Grammar of Graphi ...
- Python的Django框架中forms表单类的使用方法详解
用户表单是Web端的一项基本功能,大而全的Django框架中自然带有现成的基础form对象,本文就Python的Django框架中forms表单类的使用方法详解. Form表单的功能 自动生成HTML ...