EaselJS模块

EaselJS的官方地址 http://www.createjs.com/#!/EaselJS(国内打开比较慢，所以可以。。。。)

下面也为了方便大家提供了个人的地址：

EaselJS的下载地址 https://coding.net/u/ygxdxx/p/lee_easeljs/git/raw/master/easeljs-0.7.1.min.js

1.EaselJS Javascript库提供了一个保留图形模式Canvas,包括一个完整的分层显示列表,一个核心交互模型,和助手类使用2d图形在Canvas上更加容易。EaselJS为直接解决方案工作提供丰富的图形和交互性与HTML5 Canvas…

开始
   开始使用Easel,用Easel包装一个Canvas元素,并添加DisplayObject成为实例。EaselJS支持:
   1.图片使用位图
   2.矢量图形用形状和图形
   3.位图动画使用SpriteSheet和Sprite
   4.使用简单的文本实例文本
   5.持有其他DisplayObjects使用容器容器
   6.控制HTML DOM元素使用DOMElement
   7.所有显示对象可以添加到舞台（stage）,直接Canvas上显示出来。

简单的例子

这个例子演示了通过使用EaselJS在舞台（stage）上添加图形（shape）并在Canvas上绘制出来。

例1：在canvas上绘制一个红色的圆

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><script src="easeljs-0.7.1.min.js"></script>
</head>
<body><canvas id="test1" width="500" height="500" style="background:#fff"></canvas><script type="text/javascript">var stage= new createjs.Stage("test1");var circle = new createjs.Shape();circle.graphics.beginFill("red").drawCircle(0,0,40);circle.x=circle.y=50;stage.addChild(circle);stage.update();</script>
</body>
</html>

简单的交互示例

例2：接上面例1，对canvas内刚绘制的圆增加各种交互事件

 circle.addEventListener("click", handleClick); //在对象circle上增加一个点击事件function handleClick(event){alert("1");}circle.addEventListener("mousedown", handlePress); //在对象circle上增加一个鼠标按下事件function handlePress(event) {               //当鼠标进入的时候触发，对按下的事件进行监听event.addEventListener("mousemove", handleMove);}function handleMove(event) {//鼠标移动时发生的事件}stage.addChild(circle);stage.update();

简单的动画示例

例3：接着例1的代码，在script标签中添加代码然canvas中绘制的红色圆圈动起来

    createjs.Ticker.addEventListener("tick", handleTick);function handleTick() {//每1ms移动10个像素单位circle.x += 10;//当圆到达画布的边界时X回复开始if (circle.x > stage.canvas.width) { circle.x = 0; }stage.update();}

浏览器支持

所有现代浏览器都支持画布将支持EaselJS(http://caniuse.com/canvas)。浏览器平台之间的性能可能会有所不同,手持设备平均比大多数其他浏览器慢得多（不过随着手持设备的硬件越来越高这点可以忽视啦）。

入门createjs———EaselJS模块基本介绍相关推荐

spring 定时器设置停止_单片机MSP430入门-理论⑦--定时器模块-定时器A②
单片机MSP430入门-理论⑦--定时器模块-定时器A② 上期大概给大家汇总介绍了,定时器模块中比较重要并且常用的定时器A,大概说了下定时器A的两种常用模式,比较模式和捕获模式本期将继续介绍定时器A ...
VAPS XT开发入门教程00：基本介绍
昨天(2021.10.12)到某研究所对其人员进行培训,发现一些问题,经过整理之后,形成本文比较系统化的培训流程. 当然,如果需要打补丁,本文会更新. VAPS XT介绍 VAPS XT基于PC机的人 ...
RapidScada免费开源Scada组态软件系列教程4-各模块详细介绍
RapidScada免费开源Scada组态软件系列教程系列文章目录 RapidScada免费开源Scada组态软件系列教程1-初识RapidScada RapidScada免费开源Scada组态软件 ...
python标准库的图像处理模块_Python图像处理库PIL的ImageFont模块使用介绍
ImageFont模块定义了相同名称的类,即ImageFont类.这个类的实例存储bitmap字体,用于ImageDraw类的text()方法. PIL使用自己的字体文件格式存储bitmap字体.用户 ...
单片机MSP430入门--理论③--时钟模块-DCO和BCS寄存器
单片机MSP430入门--理论③--时钟模块-DCO和BCS寄存器上期大概给大家汇总介绍了,MSP430时钟模块的3个晶振和3个主要时钟信号,要知道时钟是单片机的脉搏,如果时钟没设置好,单片机将无法 ...
单片机MSP430入门-理论⑥--定时器模块-定时器A
单片机MSP430入门-理论⑥--定时器模块-定时器A 上期大概给大家汇总介绍了,在MSP430环境下的定时器模块,其中主要又说了下看门狗定时器,这是一款比较特别的定时器,又能当定时器,又能当系统错误 ...
正则表达式re模块使用介绍
1. re模块的介绍在Python中需要通过正则表达式对字符串进行匹配的时候,可以使用一个 re 模块 # 导入re模块 import re# 使用match方法进行匹配操作 result = re ...
Arduino可穿戴开发入门教程Arduino开发环境介绍
Arduino可穿戴开发入门教程Arduino开发环境介绍 Arduino开发环境介绍 Arduino不像我们使用的PC端操作系统一样,可以直接在操作系统中安装软件为操作系统编程.Arduino的软件 ...
WPF入门教程系列三——Application介绍(续)
接上文WPF入门教程系列二--Application介绍,我们继续来学习Application 三.WPF应用程序的关闭 WPF应用程序的关闭只有在应用程序的 Shutdown 方法被调用时,应用程序 ...

入门createjs———EaselJS模块基本介绍