CreateJS是基于HTML5开发的一套模块化的库和工具。

基于这些库，可以非常快捷地开发出基于HTML5的游戏、动画和交互应用。

CreateJS为CreateJS库，可以说是一款为HTML5游戏开发的引擎。

EaselJS

一个JavaScript库，使HTML5 Canvas标签变得更简单。

用于创建游戏，生成艺术作品，和处理其他高级图形化等有着很友好的体验。

上下左右绘制文字

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <script src="lib/easeljs-0.8.2.min.js"></script>
  7.         <script src="lib/tweenjs-0.6.2.min.js"></script>
  8.         <style>
  9.             *{
  10.                 padding: 0;
  11.                 margin: 0;
  12.             }
  13.         </style>
  14.     </head>
  15.     <body>
  16.  
  17.     <p>上下左右绘制文字</p>
  18.     <canvas id="game"></canvas>    
  19.  
  20.     <script>
  21.      var canvas,
  22.          stage,
  23.          w = document.body.clientWidth,
  24.          h = document.body.clientHeight;
  25.  
  26.      function init() {
  27.          // 设置canvas属性
  28.          canvas = document.getElementById('game');
  29.          canvas.width = w;
  30.          canvas.height = h;
  31.          // 创建舞台
  32.          stage = new createjs.Stage(canvas);
  33.  
  34.          // 绘制居中文字
  35.          var text1 = new createjs.Text('Hello World', '20px Arial', '#ff4400'),
  36.              bounds = text1.getBounds();
  37.  
  38.          text1.x = stage.canvas.width - bounds.width >> 1;
  39.         text1.y = stage.canvas.height - bounds.height >> 1;
  40.  
  41.         // 绘制左边的文字
  42.         var text2 = new createjs.Text('Hello World', '20px Arial', '#ff4400');
  43.  
  44.         // 绘制右边的文字
  45.         var text3 = new createjs.Text('Hello World', '40px Arial', '#ff4400'),
  46.             bounds = text3.getBounds();
  47.         text3.x = w - bounds.width;
  48.  
  49.         // 下居中文字
  50.         var text4 = new createjs.Text('Hello World', '20px Arial', '#ff7700'),
  51.             bounds = text4.getBounds();
  52.  
  53.         text4.x = stage.canvas.width - bounds.width >> 1;
  54.         text4.y = stage.canvas.height - bounds.height;
  55.  
  56.         stage.addChild(text1);
  57.         stage.addChild(text2);
  58.         stage.addChild(text3);
  59.         stage.addChild(text4);
  60.         stage.update();
  61.  
  62.      }
  63.  
  64.      init();
  65.  
  66.     </script>            
  67.  
  68.     </body>
  69. </html>

Bitmap绘制图片

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>绘制图片</title>
  6.         <script src="lib/easeljs-0.8.2.min.js"></script>
  7.         <script src="lib/tweenjs-0.6.2.min.js"></script>
  8.         <style>
  9.             *{
  10.                 padding: 0;
  11.                 margin: 0;
  12.             }
  13.         </style>
  14.     </head>
  15.     <body>
  16.  
  17.     <canvas id="game"></canvas>    
  18.  
  19.     <script>
  20.     var cjs = createjs,
  21.     canvas,
  22.     stage,
  23.     container,
  24.     w = 200, // 图片就是200*200的大小
  25.     h = 200,
  26.     image;
  27.  
  28.     function init() {
  29.         // 设置canvas属性
  30.         canvas = document.getElementById('game');
  31.         canvas.width = w;
  32.         canvas.height = h;
  33.  
  34.         // 创建舞台
  35.         stage = new cjs.Stage(canvas);
  36.         // 绘制外部容器
  37.         container = new cjs.Container();
  38.         stage.addChild(container);
  39.  
  40.         // 加载图片
  41.         image = new Image();
  42.         image.src = 'icon.png';
  43.         image.onload = handleImageLoad;
  44.     }
  45.  
  46.     function handleImageLoad(event) {
  47.         var bitmap = new cjs.Bitmap(event.target);
  48.         bitmap.x = 0;
  49.         bitmap.y = 0;
  50.         bitmap.on('click', function () {
  51.             alert();
  52.         });
  53.         // 加入场景
  54.         container.addChild(bitmap);
  55.         stage.update();
  56.     }
  57.  
  58.     init();
  59.  
  60.     </script>            
  61.  
  62.     </body>
  63. </html>

绘制点击提示，使用Tween

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>绘制点击提示，使用Tween</title>
  6.         <script src="lib/easeljs-0.8.2.min.js"></script>
  7.         <script src="lib/tweenjs-0.6.2.min.js"></script>
  8.         <style>
  9.             *{
  10.                 padding: 0;
  11.                 margin: 0;
  12.             }
  13.             body {
  14.                 background: #000000;
  15.             }
  16.         </style>
  17.     </head>
  18.     <body>
  19.  
  20.     <canvas id="game"></canvas>    
  21.  
  22.     <script>
  23.     var cjs = createjs,
  24.     canvas,
  25.     stage,
  26.     container,
  27.     w = window.innerWidth,
  28.     h = window.innerHeight,
  29.     s,
  30.     dt = '';
  31.  
  32.     function init() {
  33.         canvas = document.getElementById('game');
  34.         canvas.width = w;
  35.         canvas.height = h;
  36.         // 创建舞台
  37.         stage = new cjs.Stage(canvas);
  38.         container = new cjs.Container(); // 绘制外部容器
  39.         stage.addChild(container);
  40.  
  41.         // 创建矩形
  42.         s = new DrawArc(10, '#fff');
  43.         s2 = new DrawArc(10, '#fff');
  44.  
  45.         var bounds = s.getBounds(),
  46.             bounds2 = s2.getBounds();
  47.  
  48.         s.x = w - bounds.width >> 1;
  49.         s.y = h - bounds.height >> 1;
  50.         s2.x = w -bounds2.width >> 1;
  51.         s2.y = h - bounds2.height >> 1;
  52.         s2.alpha = 0.6;
  53.  
  54.         s.on('click', function () {
  55.             alert('提示');
  56.         });
  57.  
  58.         // 加入场景
  59.         container.addChild(s);
  60.         container.addChild(s2);
  61.  
  62.         // Tween
  63.         cjs.Tween.get(s, {loop: true})
  64.         .to({scaleX: 2.5, scaleY: 2.5, alpha: 0}, 1000,  cjs.Ease.linear) // jump to the new scale properties (default duration of 0)
  65.         .to({scaleX: 1, scaleY: 1, alpha: 1}, 0,  cjs.Ease.linear);
  66.  
  67.         // 设置游戏帧率
  68.         cjs.Ticker.setFPS(60);
  69.         cjs.Ticker.on('tick', stage);
  70.     }
  71.  
  72.     // 绘制矩形 类
  73.     function DrawArc(r, c) {
  74.         // 继承Shape类
  75.         cjs.Shape.call(this);
  76.         this.graphics.beginFill(c).arc(0,0,r,0,2*Math.PI);
  77.         // 设置矩形的边界属性，这样可以获得width和height属性
  78.         this.setBounds(0,0,r,r);
  79.     }
  80.  
  81.     DrawArc.prototype = new cjs.Shape(); // 获得原型方法
  82.  
  83.     init();
  84.  
  85.     </script>    
  86.  
  87.     </body>
  88. </html>

绘制笑脸

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>绘制笑脸</title>
  6.         <script src="lib/easeljs-0.8.2.min.js"></script>
  7.         <script src="lib/tweenjs-0.6.2.min.js"></script>
  8.         <style>
  9.             *{
  10.                 padding: 0;
  11.                 margin: 0;
  12.             }
  13.         </style>
  14.     </head>
  15.     <body>
  16.  
  17.     <canvas id="demoCanvas" width="1000" height="500">
  18.         alternate content
  19.     </canvas>    
  20.  
  21.     <script>
  22.  
  23.     var stage = new createjs.Stage('demoCanvas');
  24.  
  25.     // 绘制圆形
  26.     var circle = new createjs.Shape();
  27.     circle.graphics.beginFill('orange').drawCircle(0,0,100).endFill();
  28.     circle.x = 500;
  29.     circle.y = 240;
  30.     stage.addChild(circle);
  31.  
  32.     // 绘制眼睛
  33.     var eye = new createjs.Shape();
  34.     eye.graphics.beginFill('rgba(0,0,20,.5)').drawEllipse(0,0,20,40).endFill();
  35.     eye.x = 450;
  36.     eye.y = 180;
  37.     stage.addChild(eye);
  38.  
  39.     var eye2 = new createjs.Shape();
  40.     eye2.graphics = eye.graphics.clone();
  41.     eye2.x = 530;
  42.     eye2.y = 180;
  43.     stage.addChild(eye2);
  44.  
  45.     // 绘制鼻子
  46.     var nose = new createjs.Shape();
  47.     nose.graphics.beginFill('rgba(0,0,20,.5)').drawCircle(0,0,10).endFill();
  48.     nose.x = 500;
  49.     nose.y = 250;
  50.     stage.addChild(nose);
  51.  
  52.     // 绘制嘴巴
  53.     var mouth = new createjs.Shape();
  54.     mouth.graphics.ss(4).s('rgba(0,0,0,.5)').a(0,0,100,Math.PI*60/180,Math.PI*120/180);
  55.     mouth.x = 500;
  56.     mouth.y = 200;
  57.     stage.addChild(mouth);
  58.  
  59.     stage.update();
  60.  
  61.     </script>    
  62.  
  63.     </body>
  64. </html>

CreateJSのeasel.js（一）的更多相关文章

  1. createjs easal.js制作了一个很简单的链路图

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  2. HTML5之2D物理引擎 Box2D for javascript Games 系列 翻外篇--如何结合createJS应用box2d.js

    太久没有更新了,新年回来工作,突然有收到网友的邮件提问,居然还有人在关注,惭愧,找了下电脑上还有一点儿存着,顺便先发这一个番外篇吧,好歹可以看到真实的效果,等我考完英语,一定会更新下一章," ...

  3. 【一统江湖的大前端（8）】matter.js 经典物理

    目录 [一统江湖的大前端(8)]matter.js 经典物理 一.经典力学回顾 二. 仿真的实现原理 2.1 基本动力学模拟 2.2 碰撞模拟 三. 物理引擎matter.js 3.1 <愤怒的 ...

  4. 前端工程师面试问题归纳（一、问答类html/css/js基础）

    一.参考资源 1.前端面试题及答案整理(一) 2.2017年前端面试题整理汇总100题 3.2018最新Web前端经典面试试题及答案 4.[javascript常见面试题]常见前端面试题及答案 5.W ...

  5. JS中跨域问题

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

  6. CreateJS入门 -- 注释详细到爆炸（My Style）

    写在前面 首先,还是谢谢大家的支持,谢谢!记得在之前的文章中我说过自己算是一个半文艺程序员,也一直想着写一写技术性和其他偏文学性的文章.虽然自己的底子没有多么优秀,但总是觉得这个过程中可以督促自己去思 ...

  7. JS动画之缓动函数分析及动画库

    上一篇讲了JS动画定时器相关知识,这一篇介绍下缓动函数及流行的动画库. 熟悉的图 实际使用 jquery animate()+jquery.easing插件的使用: $(selector).anima ...

  8. 基于python编写的天气抓取程序

    以前一直使用中国天气网的天气预报组件都挺好,可是自从他们升级组件后数据加载变得非常不稳定,因为JS的阻塞常常导致网站打开速度很慢.为了解决这个问题决定现学现用python编写一个抓取程序,每天定时抓取 ...

  9. [算法][包围盒]球，AABB，OBB

    参考地址请看图片水印:http://www.cnblogs.com/iamzhanglei/archive/2012/06/07/2539751.html http://blog.sina.com.c ...

随机推荐

  1. iOS button 里边的 字体的 摆放

    button.contentHorizontalAlignment = UIControlContentHorizontalAlignmentLeft; button.titleEdgeInsets ...

  2. Java核心知识点学习----线程中的Semaphore学习,公共厕所排队策略

    1.什么是Semaphore? A counting semaphore. Conceptually, a semaphore maintains a set of permits. Each acq ...

  3. andorid SQLite数据库的增删改查 和事务操作

    .xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android ...

  4. [转]初探 PhoneGap 框架在 Android 上的表现

    原文地址:http://topmanopensource.iteye.com/blog/1486929 phonegap是由温哥华的一家小公司研发的多平台的移动开发框架,支持流行的大多数移动设备(iP ...

  5. Spring+MyBatis多数据源配置实现

    最近用到了MyBatis配置多数据源,原以为简单配置下就行了,实际操作后发现还是要费些事的,这里记录下,以作备忘 不多废话,直接上代码,后面会有简单的实现介绍 jdbc和log4j的配置 #定义输出格 ...

  6. Nodejs编码转化问题

    目前Node.js仅支持hex.utf8.ascii.binary.base64.ucs2几种编码的转换.对于GBK,GB2312等编码,Nodejs自带的toString()方法不支持,因此中文转化 ...

  7. Training Deep Neural Networks

    http://handong1587.github.io/deep_learning/2015/10/09/training-dnn.html  //转载于 Training Deep Neural ...

  8. Appium客户端

    Appium版本:1.5.3 Xcode有两个版本:Xcode8.1   Xcode7.2.1 iOS10以下只能用Xcode7.2.1 iOS10及以上可以用Xcode8.1   1.Appium客 ...

  9. perl 对源文件内容修改 方法整理

    1, 利用Tie::File模块来直接对文件内容进行修改. #!/usr/bin/perl -w my $std="F160"; my $fast="FAST" ...

  10. SQL2008性能计数器注册表配置单元一致性失败

    按照这个操作 http://jingyan.baidu.com/article/7c6fb4287c923880652c9074.html如果在注册表中没有 HKEY_LOCAL_MACHINE\SO ...