CreateJS/EaselJS入门教程：从零开始构建Canvas图形应用
项目地址: https://gitcode.com/gh_mirrors/ea/EaselJS 概述
本文将带领初学者了解如何使用CreateJS套件中的EaselJS库来创建基于Canvas的图形应用。EaselJS是一个强大的JavaScript库，它简化了HTML5 Canvas的操作，提供了类似Flash的显示列表架构，让开发者能够更轻松地创建丰富的交互式图形内容。
基础HTML文档结构
首先我们需要搭建一个基本的HTML文档框架，包含必要的Canvas元素和EaselJS库引用：
<!DOCTYPE html>
<html>
<head>
<script src="https://code.createjs.com/easeljs-0.8.2.min.js"></script>
<script>
function init() {
// 初始化代码将放在这里
}
</script>
</head>
<body onload="init();">
<canvas id="demoCanvas" width="500" height="300">
您的浏览器不支持Canvas元素
</canvas>
</body>
</html>
关键点解析
-
EaselJS库引入：我们通过CDN引入EaselJS库，这是最简单快捷的方式。开发者也可以选择下载库文件到本地引用。
-
Canvas元素：设置了一个500×300像素的画布，并指定了ID以便JavaScript操作。注意Canvas的尺寸应通过width/height属性设置，而非CSS，以避免图像模糊。
创建舞台(Stage)
在EaselJS中，Stage是显示层级的根容器，对应着HTML Canvas元素：
var stage = new createjs.Stage("demoCanvas");
Stage类位于createjs命名空间下，这是CreateJS库的组织方式- 构造函数参数可以是Canvas元素的ID或DOM元素引用本身
绘制基本图形
接下来我们创建一个圆形并添加到舞台：
var circle = new createjs.Shape();
circle.graphics.beginFill("red").drawCircle(0, 0, 50);
circle.x = 100;
circle.y = 100;
stage.addChild(circle);
关键概念
- Shape对象：表示可绘制矢量图形的显示对象
- Graphics对象：每个Shape都有一个graphics属性，提供绘图API
beginFill()设置填充颜色drawCircle(x, y, radius)绘制圆形
- 坐标系统：通过x/y属性设置显示对象的位置
- 显示列表：必须通过
addChild()将对象添加到舞台才能显示
更新舞台
最后一步是更新舞台，将内容渲染到Canvas上：
stage.update();
update()方法会执行以下操作：
- 清除Canvas
- 遍历所有子显示对象
- 按照显示列表顺序绘制到Canvas
进阶技巧
EaselJS支持方法链式调用，上述代码可以简化为：
stage.addChild(new createjs.Shape())
.set({x:100,y:100})
.graphics.f("red").dc(0,0,50);
其中：
f()是beginFill()的简写dc()是drawCircle()的简写
总结
通过本教程，我们学习了：
- 如何搭建EaselJS开发环境
- 创建舞台(Stage)作为显示容器
- 使用Shape和Graphics绘制基本图形
- 理解EaselJS的显示列表机制
- 更新舞台渲染内容
这些是EaselJS最基础也是最重要的概念，掌握了这些就能开始创建简单的Canvas应用。后续可以学习更复杂的显示对象、动画、交互事件等内容来丰富应用功能。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
