easeljs（HTML5游戏开发利器——EaselJS）

EaselJS是一款基于HTML5 Canvas的开源游戏框架，它提供了一些方便的工具，使得开发人员可以更加轻松地使用Canvas来创建交互式的游戏和应用程序。

简介

EaselJS由Adobe®开发，是一款面向HTML5游戏开发的JavaScript库。它基于HTML5 Canvas的2D绘图API，并提供了易于使用的对象模型，可以让开发人员在HTML5游戏开发中省去不少麻烦。EaselJS提供许多功能强大、易于使用的工具，包括用于管理场景和动画的容器、用于显示图像、文本和矢量图形的显示对象、交互式事件支持以及支持多个分辨率的自适应缩放等等。

在JavaScript游戏框架中，EaselJS已经成为学习的标准，甚至已经成为了被广泛使用的开发工具之一。EaselJS可以和其他的HTML5技术一起使用，例如：TweenJS和PreloadJS，它们分别用于动画和资源预加载。

创建图形

EaselJS提供了一个可供代码使用的图形界面，允许用户创建矢量图形。代码如下：

var shape = new createjs.Shape();

shape.graphics.beginFill(\"red\").drawRect(0, 0, 100, 100);

stage.addChild(shape);

上面的代码中，创建了一个新的形状对象，用红色的矩形填充它，然后将它添加到画布上。EaselJS的图形界面提供了一些默认对象，例如圆形或矩形，或者您也可以创建自己的自定义形状。

交互式事件支持

通过EaselJS，图形和形状对象可使用可交互性和可触攀性事件进行操作。用户可以操作对象甚至可以拖动和放置它们以支持一些交互式的绘制，使用到的代码如下：

var shape = new createjs.Shape();

shape.graphics.beginFill(\"red\").drawCircle(0, 0, 50);

shape.x = 100;

shape.y = 100;

shape.regX = shape.regY = 50;

shape.addEventListener(\"mousedown\", function(event) {

console.log(\"Mouse Down Event Detected!\");

});

stage.addChild(shape);

在上面的代码中，一个圆形形状被创建，设置了其位置、缩放比例等，然后将事件监听添加到其上。事件名称mousedown定义了鼠标点击时所要执行的程序。

Asset Loader

加载和处理大型图像和媒体文件通常需要很长时间，所以通过客户端代码使用它们可能会导致应用程序的延迟和瓶颈。EaselJS提供了预加载、PIXI和PlayCanvas等方法，以优化图像和媒体文件处理。Asset Loader通过将文件缓存到本地，以便在需要时快速检索和引用以使用这些资源。

动画

EaselJS提供了一些动画效果，可以通过它来快速地对图形进行动画处理。使用EaselJS开发动画可以遵循一些简单的规则，例如：在容器内创建图形以加快处理速度，在环境中创建自己的简化帧绘制函数等。

总的来说，EaselJS是一个高效、灵活而易于使用的HTML5游戏框架，它为开发HTML5游戏和应用提供了强大的工具和可视化界面，在HTML5游戏开发中发挥着十分重要的作用。