CreateJSのeasel.js（一）
CreateJS是基于HTML5开发的一套模块化的库和工具。
基于这些库，可以非常快捷地开发出基于HTML5的游戏、动画和交互应用。
CreateJS为CreateJS库，可以说是一款为HTML5游戏开发的引擎。
EaselJS
一个JavaScript库，使HTML5 Canvas标签变得更简单。
用于创建游戏，生成艺术作品，和处理其他高级图形化等有着很友好的体验。
上下左右绘制文字
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="lib/easeljs-0.8.2.min.js"></script>
<script src="lib/tweenjs-0.6.2.min.js"></script>
<style>
*{
padding: 0;
margin: 0;
}
</style>
</head>
<body> <p>上下左右绘制文字</p>
<canvas id="game"></canvas> <script>
var canvas,
stage,
w = document.body.clientWidth,
h = document.body.clientHeight; function init() {
// 设置canvas属性
canvas = document.getElementById('game');
canvas.width = w;
canvas.height = h;
// 创建舞台
stage = new createjs.Stage(canvas); // 绘制居中文字
var text1 = new createjs.Text('Hello World', '20px Arial', '#ff4400'),
bounds = text1.getBounds(); text1.x = stage.canvas.width - bounds.width >> 1;
text1.y = stage.canvas.height - bounds.height >> 1; // 绘制左边的文字
var text2 = new createjs.Text('Hello World', '20px Arial', '#ff4400'); // 绘制右边的文字
var text3 = new createjs.Text('Hello World', '40px Arial', '#ff4400'),
bounds = text3.getBounds();
text3.x = w - bounds.width; // 下居中文字
var text4 = new createjs.Text('Hello World', '20px Arial', '#ff7700'),
bounds = text4.getBounds(); text4.x = stage.canvas.width - bounds.width >> 1;
text4.y = stage.canvas.height - bounds.height; stage.addChild(text1);
stage.addChild(text2);
stage.addChild(text3);
stage.addChild(text4);
stage.update(); } init(); </script> </body>
</html>
Bitmap绘制图片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>绘制图片</title>
<script src="lib/easeljs-0.8.2.min.js"></script>
<script src="lib/tweenjs-0.6.2.min.js"></script>
<style>
*{
padding: 0;
margin: 0;
}
</style>
</head>
<body> <canvas id="game"></canvas> <script>
var cjs = createjs,
canvas,
stage,
container,
w = 200, // 图片就是200*200的大小
h = 200,
image; function init() {
// 设置canvas属性
canvas = document.getElementById('game');
canvas.width = w;
canvas.height = h; // 创建舞台
stage = new cjs.Stage(canvas);
// 绘制外部容器
container = new cjs.Container();
stage.addChild(container); // 加载图片
image = new Image();
image.src = 'icon.png';
image.onload = handleImageLoad;
} function handleImageLoad(event) {
var bitmap = new cjs.Bitmap(event.target);
bitmap.x = 0;
bitmap.y = 0;
bitmap.on('click', function () {
alert();
});
// 加入场景
container.addChild(bitmap);
stage.update();
} init(); </script> </body>
</html>
绘制点击提示，使用Tween
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>绘制点击提示，使用Tween</title>
<script src="lib/easeljs-0.8.2.min.js"></script>
<script src="lib/tweenjs-0.6.2.min.js"></script>
<style>
*{
padding: 0;
margin: 0;
}
body {
background: #000000;
}
</style>
</head>
<body> <canvas id="game"></canvas> <script>
var cjs = createjs,
canvas,
stage,
container,
w = window.innerWidth,
h = window.innerHeight,
s,
dt = ''; function init() {
canvas = document.getElementById('game');
canvas.width = w;
canvas.height = h;
// 创建舞台
stage = new cjs.Stage(canvas);
container = new cjs.Container(); // 绘制外部容器
stage.addChild(container); // 创建矩形
s = new DrawArc(10, '#fff');
s2 = new DrawArc(10, '#fff'); var bounds = s.getBounds(),
bounds2 = s2.getBounds(); s.x = w - bounds.width >> 1;
s.y = h - bounds.height >> 1;
s2.x = w -bounds2.width >> 1;
s2.y = h - bounds2.height >> 1;
s2.alpha = 0.6; s.on('click', function () {
alert('提示');
}); // 加入场景
container.addChild(s);
container.addChild(s2); // Tween
cjs.Tween.get(s, {loop: true})
.to({scaleX: 2.5, scaleY: 2.5, alpha: 0}, 1000, cjs.Ease.linear) // jump to the new scale properties (default duration of 0)
.to({scaleX: 1, scaleY: 1, alpha: 1}, 0, cjs.Ease.linear); // 设置游戏帧率
cjs.Ticker.setFPS(60);
cjs.Ticker.on('tick', stage);
} // 绘制矩形 类
function DrawArc(r, c) {
// 继承Shape类
cjs.Shape.call(this);
this.graphics.beginFill(c).arc(0,0,r,0,2*Math.PI);
// 设置矩形的边界属性，这样可以获得width和height属性
this.setBounds(0,0,r,r);
} DrawArc.prototype = new cjs.Shape(); // 获得原型方法 init(); </script> </body>
</html>
绘制笑脸
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>绘制笑脸</title>
<script src="lib/easeljs-0.8.2.min.js"></script>
<script src="lib/tweenjs-0.6.2.min.js"></script>
<style>
*{
padding: 0;
margin: 0;
}
</style>
</head>
<body> <canvas id="demoCanvas" width="1000" height="500">
alternate content
</canvas> <script> var stage = new createjs.Stage('demoCanvas'); // 绘制圆形
var circle = new createjs.Shape();
circle.graphics.beginFill('orange').drawCircle(0,0,100).endFill();
circle.x = 500;
circle.y = 240;
stage.addChild(circle); // 绘制眼睛
var eye = new createjs.Shape();
eye.graphics.beginFill('rgba(0,0,20,.5)').drawEllipse(0,0,20,40).endFill();
eye.x = 450;
eye.y = 180;
stage.addChild(eye); var eye2 = new createjs.Shape();
eye2.graphics = eye.graphics.clone();
eye2.x = 530;
eye2.y = 180;
stage.addChild(eye2); // 绘制鼻子
var nose = new createjs.Shape();
nose.graphics.beginFill('rgba(0,0,20,.5)').drawCircle(0,0,10).endFill();
nose.x = 500;
nose.y = 250;
stage.addChild(nose); // 绘制嘴巴
var mouth = new createjs.Shape();
mouth.graphics.ss(4).s('rgba(0,0,0,.5)').a(0,0,100,Math.PI*60/180,Math.PI*120/180);
mouth.x = 500;
mouth.y = 200;
stage.addChild(mouth); stage.update(); </script> </body>
</html>
CreateJSのeasel.js（一）的更多相关文章
- createjs easal.js制作了一个很简单的链路图
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- HTML5之2D物理引擎 Box2D for javascript Games 系列 翻外篇--如何结合createJS应用box2d.js
太久没有更新了,新年回来工作,突然有收到网友的邮件提问,居然还有人在关注,惭愧,找了下电脑上还有一点儿存着,顺便先发这一个番外篇吧,好歹可以看到真实的效果,等我考完英语,一定会更新下一章," ...
- 【一统江湖的大前端（8）】matter.js 经典物理
目录 [一统江湖的大前端(8)]matter.js 经典物理 一.经典力学回顾 二. 仿真的实现原理 2.1 基本动力学模拟 2.2 碰撞模拟 三. 物理引擎matter.js 3.1 <愤怒的 ...
- 前端工程师面试问题归纳（一、问答类html/css/js基础）
一.参考资源 1.前端面试题及答案整理(一) 2.2017年前端面试题整理汇总100题 3.2018最新Web前端经典面试试题及答案 4.[javascript常见面试题]常见前端面试题及答案 5.W ...
- JS中跨域问题
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
- CreateJS入门 -- 注释详细到爆炸（My Style）
写在前面 首先,还是谢谢大家的支持,谢谢!记得在之前的文章中我说过自己算是一个半文艺程序员,也一直想着写一写技术性和其他偏文学性的文章.虽然自己的底子没有多么优秀,但总是觉得这个过程中可以督促自己去思 ...
- JS动画之缓动函数分析及动画库
上一篇讲了JS动画定时器相关知识,这一篇介绍下缓动函数及流行的动画库. 熟悉的图 实际使用 jquery animate()+jquery.easing插件的使用: $(selector).anima ...
- 基于python编写的天气抓取程序
以前一直使用中国天气网的天气预报组件都挺好,可是自从他们升级组件后数据加载变得非常不稳定,因为JS的阻塞常常导致网站打开速度很慢.为了解决这个问题决定现学现用python编写一个抓取程序,每天定时抓取 ...
- [算法][包围盒]球，AABB，OBB
参考地址请看图片水印:http://www.cnblogs.com/iamzhanglei/archive/2012/06/07/2539751.html http://blog.sina.com.c ...
随机推荐
- Dynamic CRM2016在一台本地服务器安装部署
在本地单独一台服务器上安装部署CRM2016时需要提前安装好CRM软件需要的必备软件,具体需要安装的组件如下截图:其中required为必须具备的安装组件.license可以采用微软官网的90天测试版 ...
- springMVC配置（XML配置详解）
原文出自:http://www.newasp.net/tech/71609.html web.xml配置: servlet> <servlet-name>dispatcher< ...
- Java核心知识点学习----多线程并发之线程间的通信,notify,wait
1.需求: 子线程循环10次,主线程循环100次,这样间隔循环50次. 2.实现: package com.amos.concurrent; /** * @ClassName: ThreadSynch ...
- 在将 varchar 值 '1,2,3,4,5,6,7,8' 转换成数据类型 int 时失败。
alter PROCEDURE PrTradingDelete ) AS BEGIN WHERE id in(@id) END GO 执行上面这个存储过程会异常.提示 :在将 varchar 值 '1 ...
- sbt的assembly插件使用(打包所有依赖)
1.sbt是什么 对于sbt 我也是小白, 为了搞spark看了一下scala,学习scala时指定的构建工具就是sbt(因为sbt也是用scala开发的嘛),起初在我眼里就是一个maven(虽然ma ...
- memcache的一致性hash算法使用
一.概述 1.我们的memcache客户端(这里我看的spymemcache的源码),使用了一致性hash算法ketama进行数据存储节点的选择.与常规的hash算法思路不同,只是对我们要存储数据的k ...
- hd2066一个人的旅行
Problem Description 虽然草儿是个路痴(就是在杭电待了一年多,居然还会在校园里迷路的人,汗~),但是草儿仍然很喜欢旅行,因为在旅途中 会遇见很多人(白马王子,^0^),很多事,还能丰 ...
- SignalR一个集成的客户端与服务器库。内部的两个对象类：PersistentConnection和Hub
SignalR 将整个交换信息的行为封装得非常漂亮,客户端和服务器全部都使用 JSON 来沟通,在服务器端声明的所有 hub 的信息,都会一般生成 JavaScript 输出到客户端. 它是基于浏览器 ...
- nodejs:express 4.x
最近学习express,最新的版本到了4.x,与之前的3.0版本相比,变化还是很大的.网上的教程很多都是基于3.0的,再编译一个例子的时候,吃了不少苦头.现总结一下express4.x的变化. 安装: ...
- 文件和目录：access函数
access函数是按照实际用户ID和实际组ID进行访问权限测试的: #include <unistd.h> int access( const char *pathname, int mo ...