杰瑞科技汇

Createjs教程怎么学？新手入门指南？

作者：99ANYc3cd6栏目：技术教程2026-04-18 01:143

CreateJS 综合教程：从入门到精通

目录

  1. 第一部分：CreateJS 是什么？为什么选择它？

    Createjs教程怎么学？新手入门指南？-图1
    （图片来源网络，侵删）
    • 简介
    • 核心优势
    • 适用场景

  2. 第二部分：环境搭建与第一个项目

    • 引入 CreateJS 库
    • 创建 HTML 画布
    • 初始化 Stage 和 Shape
    • 完整示例：画一个矩形

  3. 第三部分：核心概念详解

    • Stage (舞台)：一切表演的地方
    • Container (容器)：对象的组织者
    • DisplayObject (显示对象)：所有可见事物的基类
    • Shape (形状)：绘制矢量图形
    • Bitmap (位图)：显示图片
    • Text (文本)：显示文字
    • Sprite (精灵)：实现动画的利器
    • Ticker (心跳/事件循环)：让动起来的核心

  4. 第四部分：交互与事件处理

    • on() 方法：添加事件监听
    • 常用事件类型：click, mousedown, pressmove, mouseover 等
    • 示例：可拖拽的方块

  5. 第五部分：动画与缓动

    Createjs教程怎么学？新手入门指南？-图2
    （图片来源网络，侵删）
    • Tween 类：实现补间动画
    • Tween.get() 和 to() 方法
    • Ease 类：让动画更自然
    • 示例：平滑移动的球

  6. 第六部分：实战案例：一个简单的打地鼠游戏

    • 游戏设计思路
    • 步骤分解：创建场景、添加地鼠、实现点击、计分
    • 完整代码

  7. 第七部分：进阶与资源

    • 命名空间与模块化
    • 性能优化建议
    • 官方资源与学习路径

第一部分：CreateJS 是什么？为什么选择它？

简介

CreateJS 是一个用于创建富交互的 HTML5 内容的 JavaScript 库套件，它不是单一的库，而是由几个独立但可协同工作的库组成,主要包括：

  • EaselJS: 用于处理图形、显示列表和用户交互的 2D 图形引擎，这是 CreateJS 的核心,也是我们教程的重点。
  • TweenJS: 用于创建平滑的动画和过渡效果。
  • SoundJS: 用于处理音频的加载和播放。
  • PreloadJS: 用于管理和协调资源（如图像、声音、数据）的加载。

核心优势

  1. 基于标准: 使用 HTML5 的 <canvas> 元素,兼容现代浏览器。
  2. API 友好: 设计上借鉴了 Adobe Flash 的 DisplayList 模型，对于有 Flash 开发经验的开发者非常友好,易于上手。
  3. 功能强大: 提供了丰富的图形绘制、动画、事件处理等功能，足以应对大多数 2D 游戏和动画需求。
  4. 高性能: 经过高度优化,能够高效地渲染大量对象。
  5. 生态完善: 拥有官方的图形编辑器 CreateJS Toolkit,可以方便地导出精灵动画等资源。

适用场景

  • HTML5 小游戏: 如打地鼠、贪吃蛇、卡牌游戏等。
  • 交互式广告: 富有创意和吸引力的广告横幅。
  • 数据可视化: 将枯燥的数据以生动、交互式的图表形式展示。
  • 教育应用: 制作互动课件和模拟实验。

第二部分：环境搭建与第一个项目

引入 CreateJS 库

最简单的方式是通过 CDN（内容分发网络）引入，在你的 HTML 文件的 <head> 标签内添加以下链接：

Createjs教程怎么学？新手入门指南？-图3
（图片来源网络，侵删）
<!-- 引入 EaselJS 库 -->
<script src="https://code.createjs.com/1.0.0/easeljs.min.js"></script>

创建 HTML 画布

在 <body> 中创建一个 <canvas> 元素，并给它一个 id，方便我们通过 JavaScript 获取它。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">CreateJS Hello World</title>
    <script src="https://code.createjs.com/1.0.0/easeljs.min.js"></script>
</head>
<body>
    <canvas id="gameCanvas" width="800" height="600" style="border: 1px solid black;"></canvas>
    <script>
        // 我们的所有 JavaScript 代码将写在这里
    </script>
</body>
</html>

初始化 Stage 和 Shape

  1. 获取 Canvas 元素：使用 document.getElementById。
  2. 创建 Stage：将 Canvas 元素传递给 new createjs.Stage(),创建舞台实例。
  3. 创建 Shape：new createjs.Shape() 是一个用于绘制矢量图形的对象。
  4. ：使用 Shape 的 graphics 属性来调用绘图方法（如 beginFill, drawRect）。
  5. 添加到舞台：使用 stage.addChild() 将 Shape 对象添加到舞台上。
  6. 更新舞台：调用 stage.update()，将所有绘制操作渲染到 Canvas 上。

完整示例：画一个矩形

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">My First CreateJS App</title>
    <script src="https://code.createjs.com/1.0.0/easeljs.min.js"></script>
</head>
<body>
    <canvas id="gameCanvas" width="800" height="600" style="border: 1px solid black;"></canvas>
    <script>
        // 1. 获取 Canvas 元素
        const canvas = document.getElementById("gameCanvas");
        // 2. 创建舞台
        const stage = new createjs.Stage(canvas);
        // 3. 创建一个 Shape 对象
        const rect = new createjs.Shape();
        // 4. 使用 graphics 属性绘制一个红色矩形
        rect.graphics.beginFill("Red");
        rect.graphics.drawRect(0, 0, 100, 100); // (x, y, width, height)
        // 5. 将矩形添加到舞台中央
        rect.x = canvas.width / 2 - 50; // 矩形宽度的一半，使其居中
        rect.y = canvas.height / 2 - 50; // 矩形高度的一半，使其居中
        stage.addChild(rect);
        // 6. 更新舞台，显示所有内容
        stage.update();
    </script>
</body>
</html>

将以上代码保存为 .html 文件，用浏览器打开,你就能看到一个红色的方块居中显示在画布上。

第三部分：核心概念详解

Stage (舞台)

Stage 是所有显示对象的最终容器，也是所有渲染发生的地方，它对应着 HTML5 的 <canvas> 元素，你所有的对象都必须先添加到 Stage（或其子容器）上才能被看到。

Container (容器)

Container 是一种特殊的 DisplayObject，它可以像文件夹一样组织其他的 DisplayObject，当你移动或旋转一个 Container 时，它内部的所有子对象也会跟着移动和旋转，这对于管理游戏中的角色、UI 界面等非常有用。

const container = new createjs.Container();
stage.addChild(container);
// 现在可以把对象添加到 container，而不是直接添加到 stage
container.addChild(shape1, shape2);

DisplayObject (显示对象)

DisplayObject 是所有可见元素的基类，它定义了所有对象共有的属性和方法,如：

  • x, y: 位置
  • scaleX, scaleY: 缩放
  • rotation: 旋转
  • alpha: 透明度 (0-1)
  • visible: 是否可见

Shape, Bitmap, Text, Container 等都是 DisplayObject 的子类。

Shape (形状)

用于绘制矢量图形，如矩形、圆形、多边形等，通过其 graphics 属性进行绘制。

const circle = new createjs.Shape();
circle.graphics.beginFill("DeepSkyBlue");
circle.graphics.drawCircle(0, 0, 50); // (centerX, centerY, radius)
circle.x = 200;
stage.addChild(circle);

Bitmap (位图)

用于显示图片，你需要先加载一张图片，然后将其传递给 Bitmap 构造函数。

const img = new Image();
img.src = "path/to/your/image.png";
img.onload = function() {
    const bitmap = new createjs.Bitmap(img);
    bitmap.x = 400;
    stage.addChild(bitmap);
    stage.update();
};

Text (文本)

用于在画布上渲染文字。

const text = new createjs.Text("Hello CreateJS!", "36px Arial", "#000000");
text.x = 100;
text.y = 100;
stage.addChild(text);

Sprite (精灵)

Sprite 用于实现基于帧的动画，它需要一个 精灵表（Sprite Sheet，即一张包含所有动画帧的大图）和相关的数据来定义每帧的位置和大小。

// 假设我们有一个精灵表和对应的JSON数据
const spriteSheet = new createjs.SpriteSheet({
    images: ["character_walk.png"],
    frames: {width: 64, height: 96, count: 8}, // 每帧64x96，共8帧
    animations: {
        walk: [0, 7] // 从第0帧到第7帧构成 "walk" 动画
    }
});
const character = new createjs.Sprite(spriteSheet, "walk");
character.x = 300;
character.y = 200;
stage.addChild(character);

Ticker (心跳/事件循环)

Ticker 是 CreateJS 的核心定时器，它以固定的帧率（默认60fps）触发 tick 事件，所有的动画、游戏逻辑更新都应该在 tick 事件处理函数中进行。

// 添加 tick 事件监听
createjs.Ticker.addEventListener("tick", tickHandler);
function tickHandler(event) {
    // 在这里更新对象的状态，例如移动、旋转等
    // rect.x += 1;
    // 更新舞台以显示变化
    stage.update();
}

第四部分：交互与事件处理

CreateJS 使用事件模型来处理用户交互，与 DOM 事件类似。

on() 方法

使用 on() 方法为显示对象添加事件监听器。

rect.on("click", function(event) {
    console.log("矩形被点击了！");
    // 点击后改变颜色
    this.graphics.clear().beginFill("Green").drawRect(0, 0, 100, 100);
    stage.update(); // 更新舞台以显示颜色变化
});
  • "click": 事件类型。
  • function(event): 事件触发时执行的回调函数。
  • this: 在回调函数中，this 指向触发事件的显示对象（即 rect）。

常用事件类型

  • click: 鼠标单击。
  • mousedown: 鼠标按下。
  • mouseup: 鼠标松开。
  • pressmove: 当鼠标在对象上按下并拖动时持续触发,非常适合实现拖拽功能。
  • pressup: 当鼠标在对象上按下后松开时触发。
  • mouseover: 鼠标移入对象区域。
  • mouseout: 鼠标移出对象区域。

示例：可拖拽的方块

// ... (初始化 stage 和 rect 的代码)
// 设置鼠标启用，否则无法接收事件
rect.mouseEnabled = true;
rect.on("pressmove", function(event) {
    // event.currentTarget 是当前事件的目标对象，等同于 this
    // event.stageX 和 event.stageY 是鼠标在舞台上的坐标
    this.x = event.stageX - this.getBounds().width / 2;
    this.y = event.stageY - this.getBounds().height / 2;
    // 由于位置改变，需要更新舞台
    stage.update();
});

第五部分：动画与缓动

TweenJS 库让创建平滑的动画变得异常简单。

Tween 类

通过 createjs.Tween.get() 开始一个补间动画，然后使用 .to() 定义目标属性和持续时间。

Tween.get() 和 to() 方法

  • createjs.Tween.get(target): 指定要动画的对象。
  • .to(properties, duration, ease): 定义动画的终点。
    • properties: 一个对象，包含要改变的属性（如 {x: 500, y: 300, alpha: 0}）。
    • duration: 动画持续时间,单位是毫秒。
    • ease: 缓动函数，让动画更自然（如 createjs.Ease.quadIn）。

Ease 类

Ease 类提供了多种预设的缓动效果,如：

  • createjs.Ease.linear: 线性（匀速）。
  • createjs.Ease.quadIn: 二次缓入（先慢后快）。
  • createjs.Ease.quadOut: 二次缓出（先快后慢）。
  • createjs.Ease.elasticOut: 弹性缓出。

示例：平滑移动的球

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">CreateJS Tween Animation</title>
    <script src="https://code.createjs.com/1.0.0/easeljs.min.js"></script>
    <script src="https://code.createjs.com/1.0.0/tweenjs.min.js"></script>
</head>
<body>
    <canvas id="gameCanvas" width="800" height="600" style="border: 1px solid black;"></canvas>
    <script>
        const canvas = document.getElementById("gameCanvas");
        const stage = new createjs.Stage(canvas);
        const ball = new createjs.Shape();
        ball.graphics.beginFill("Orange").drawCircle(0, 0, 30);
        ball.x = 50;
        ball.y = 300;
        stage.addChild(ball);
        // 创建一个循环动画
        createjs.Tween.get(ball, {loop: true})
            .to({x: 750, y: 100}, 2000, createjs.Ease.quadOut) // 2秒内移动到 (750, 100)，使用缓出效果
            .to({x: 50, y: 500}, 2000, createjs.Ease.quadIn)   // 再用2秒移动到 (50, 500)，使用缓入效果
            .to({x: 400, y: 300}, 2000, createjs.Ease.bounceOut); // 最后2秒弹跳回中心
        // 我们不需要在 Ticker 中更新，因为 Tween 会自动处理
        // 但如果需要其他逻辑，可以加上 Ticker
        createjs.Ticker.addEventListener("tick", stage);
    </script>
</body>
</html>

第六部分：实战案例：一个简单的打地鼠游戏

游戏设计思路

  1. 一个网格布局的“洞”。
  2. 地鼠会随机从某个洞里冒出。
  3. 玩家点击地鼠,得分增加。
  4. 地鼠在一段时间后自动消失。

步骤分解

准备资源 你需要一张地鼠的图片（PNG，带透明背景）。

创建 HTML 和基本舞台

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">Whack-a-Mole</title>
    <script src="https://code.createjs.com/1.0.0/easeljs.min.js"></script>
    <script src="https://code.createjs.com/1.0.0/tweenjs.min.js"></script>
    <style> body { margin: 0; } </style>
</head>
<body>
    <h1>Score: <span id="score">0</span></h1>
    <canvas id="gameCanvas" width="800" height="600"></canvas>
    <script src="game.js"></script>
</body>
</html>

编写 game.js 逻辑

// game.js
const canvas = document.getElementById("gameCanvas");
const stage = new createjs.Stage(canvas);
const scoreText = document.getElementById("score");
// 游戏配置
const GRID_COLS = 3;
const GRID_ROWS = 3;
const MOLE_IMAGE_URL = "mole.png"; // 替换为你的图片路径
const GAME_SPEED = 1500; // 地鼠出现的间隔
let score = 0;
let moles = [];
let gameInterval;
// 预加载图片
const preloadQueue = new createjs.LoadQueue();
preloadQueue.on("fileload", handleFileLoad, this);
preloadQueue.on("complete", handleComplete, this);
preloadQueue.loadFile({id: "mole", src: MOLE_IMAGE_URL});
function handleFileLoad(event) {
    // 图片加载完成，可以在这里做一些初始化
}
function handleComplete() {
    // 创建游戏网格
    createGrid();
    // 开始游戏循环
    startGame();
    // 设置舞台更新
    createjs.Ticker.addEventListener("tick", stage);
}
function createGrid() {
    const cellWidth = canvas.width / GRID_COLS;
    const cellHeight = canvas.height / GRID_ROWS;
    for (let row = 0; row < GRID_ROWS; row++) {
        for (let col = 0; col < GRID_COLS; col++) {
            const hole = new createjs.Shape();
            hole.graphics.beginFill("SaddleBrown").drawRoundRect(10, 10, cellWidth - 20, cellHeight - 20, 20);
            hole.x = col * cellWidth;
            hole.y = row * cellHeight;
            stage.addChild(hole);
            // 创建地鼠，初始时不可见
            const mole = new createjs.Bitmap(preloadQueue.getResult("mole"));
            mole.regX = mole.image.width / 2; // 设置注册点为中心
            mole.regY = mole.image.height / 2;
            mole.x = hole.x + cellWidth / 2;
            mole.y = hole.y + cellHeight / 2;
            mole.visible = false;
            mole.scaleX = mole.scaleY = 0; // 初始缩放为0，即看不见
            // 添加点击事件
            mole.on("click", whackMole);
            stage.addChild(mole);
            moles.push(mole);
        }
    }
}
function showRandomMole() {
    const availableMoles = moles.filter(m => !m.visible);
    if (availableMoles.length > 0) {
        const randomMole = availableMoles[Math.floor(Math.random() * availableMoles.length)];
        // 让地鼠出现
        randomMole.visible = true;
        createjs.Tween.get(randomMole)
            .to({scaleX: 1, scaleY: 1}, 300, createjs.Ease.backOut) // 弹出效果
            .wait(1000) // 停留1秒
            .to({scaleX: 0, scaleY: 0}, 300, createjs.Ease.backIn) // 缩回去
            .call(() => { randomMole.visible = false; }); // 动画结束后隐藏
    }
}
function whackMole(event) {
    // 如果地鼠正在缩放回去，则不能再点击
    if (event.target.scaleX < 0.9) return;
    score++;
    scoreText.textContent = score;
    // 立即让地鼠消失
    createjs.Tween.get(event.target).to({scaleX: 0, scaleY: 0}, 100, createjs.Ease.backIn)
        .call(() => { event.target.visible = false; });
}
function startGame() {
    // 每隔 GAME_SPEED 毫秒显示一只地鼠
    gameInterval = setInterval(showRandomMole, GAME_SPEED);
}
function stopGame() {
    clearInterval(gameInterval);
}
// 可以添加一个停止游戏的逻辑，
// window.addEventListener("keydown", (e) => {
//     if (e.key === "Escape") {
//         stopGame();
//     }
// });

第七部分：进阶与资源

命名空间与模块化

CreateJS 默认使用全局的 createjs 命名空间，对于大型项目，可能会造成全局污染，现代前端开发推荐使用模块化（如 ES6 Modules），你可以使用构建工具（如 Webpack）来打包 CreateJS,并将其作为模块引入。

性能优化建议

  1. 对象池: 对于频繁创建和销毁的对象（如子弹、粒子），使用对象池来复用它们,避免频繁的内存分配和垃圾回收。
  2. 减少不必要的 stage.update(): 不要在每一帧都无条件地调用 stage.update()，只在确实有内容发生变化时调用，在 Ticker 事件中，通常只在最后调用一次 stage.update() 即可。
  3. 使用位图: 对于复杂的静态图形，绘制成一张位图比用 Shape 多次绘制性能更好。
  4. cache() 方法: 对于不常变化的复杂显示对象，可以使用 object.cache(x, y, width, height) 将其缓存为一个位图,这会大大提升渲染性能。

官方资源与学习路径

希望这份详细的教程能帮助你顺利入门 CreateJS！祝你开发愉快！

99ANYc3cd6 99ANYc3cd6 管理员
分享：
扫描分享到社交APP
上一篇
下一篇

相关推荐

  • 刘洋STM32视频教程适合新手学吗？

    刘洋STM32视频教程适合新手学吗？

    刘洋是国内非常知名的嵌入式系统讲师，他的STM32视频教程在初学者和进阶工程师中都有极高的口碑，他的课程以体系化、实战性强、讲解通俗易懂著称，刘洋STM32教程的主要特点和优势在开始查找之前，了解他的教程为何受欢迎,能帮助您更好地判断是否适...

    99ANYc3cd6 99ANYc3cd6
    2026-04-18
    3 0 0
  • 单片机C语言教程PDF哪里找？

    单片机C语言教程PDF哪里找？

    经典入门书籍（通常有电子版或可扫描为PDF）这些书籍是单片机领域的经典之作，内容系统、深入,非常适合作为系统学习的教材，《单片机C语言程序设计实训100例——基于8051+Proteus仿真》作者：张毅特点：实战导向极强：书中包含100...

    99ANYc3cd6 99ANYc3cd6
    2026-04-18
    4 0 0
  • 如何开发若水新闻客户端？

    如何开发若水新闻客户端？

    若水新闻客户端开发全栈教程“若水”这个名字寓意着“上善若水，厚德载物”，我们的客户端也应该像水一样，流畅、稳定、包容万物，为用户提供纯粹、高效的阅读体验，第一部分：项目规划与设计在敲下第一行代码之前,清晰的规划至关重要，项目定位与目标核心定...

    99ANYc3cd6 99ANYc3cd6
    2026-04-18
    4 0 0
  • 刘凯STM32视频教程适合什么基础学？

    刘凯STM32视频教程适合什么基础学？

    教程简介与特点刘凯老师的STM32教程通常指的是他在野火工作室期间录制的系列视频，虽然他现在已经离开野火，但其录制的教程（尤其是基于STM32F1和F4系列的）因其系统、全面、细致的特点，至今仍被无数学习者奉为入门STM32的“圣经”，主要...

    99ANYc3cd6 99ANYc3cd6
    2026-04-18
    3 0 0
  • 红米打不开如何刷机？

    红米打不开如何刷机？

    刷机是修复这类问题的终极手段，这篇教程将分为【准备阶段】、【刷机阶段】和【后续阶段】三大部分，并针对不同情况提供多种方法，力求做到详细、安全、易懂，核心概念：什么是刷机？刷机就是给手机安装一套全新的操作系统（我们称之为“ROM”），当原厂系...

    99ANYc3cd6 99ANYc3cd6
    2026-04-18
    3 0 0
  • 红米1刷机教程视频安全吗？

    红米1刷机教程视频安全吗？

    由于这是一款发布于2014年的老机型，视频教程已经非常稀少且可能过时，很多视频链接可能已失效，我将为您提供一个结合图文说明、思路清晰、完全可操作的详细文字教程,并指导您如何寻找和观看相关的视频作为辅助，核心思路：刷机=准备工作+解锁...

    99ANYc3cd6 99ANYc3cd6
    2026-04-18
    2 0 0
  • 酷派手机刷机视频教程怎么找？

    酷派手机刷机视频教程怎么找？

    刷机有风险，操作不当可能导致手机变砖（无法开机）、数据丢失、功能异常等问题，请在刷机前务必仔细阅读教程，并确保每一步操作准确无误，酷派官方通常不提供刷机支持，请自行承担所有风险，第一部分：刷机前准备（至关重要！）在观看任何视频教程之前,请务...

    99ANYc3cd6 99ANYc3cd6
    2026-04-18
    3 0 0
  • 李想STM32视频教程该怎么学？

    李想STM32视频教程该怎么学？

    教程概述主讲人：李想平台：主要发布在B站（哔哩哔哩）上，搜索“李想”即可找到他的官方频道，：基于野火、正点原子等主流开发板，从零开始，系统地讲解STM32的各个外设（GPIO、UART、I2C、SPI、ADC、DMA、定时器、中断等）及其应...

    99ANYc3cd6 99ANYc3cd6
    2026-04-18
    3 0 0
  • H3C交换机配置教程怎么学？

    H3C交换机配置教程怎么学？

    H3C交换机配置综合教程第一部分：准备工作与首次登录在开始配置之前,请确保你已经准备好以下设备和信息：H3C交换机：已通电，配置线：一根Console线（通常是一头是USB，另一头是RJ45的串口线），计算机：安装了终端模拟软...

    99ANYc3cd6 99ANYc3cd6
    2026-04-18
    4 0 0
  • 蔡高厅高等数学视频教程怎么样？

    蔡高厅高等数学视频教程怎么样？

    蔡高厅老师是西安交通大学数学系的资深教授，他的高等数学课程在学生中口碑极佳，被誉为“经典中的经典”，他的教学风格和内容编排，非常适合作为考研复习、期末备考或自学高数的首选材料之一，蔡高厅高数教程的特点与优势体系完整，逻辑清晰：蔡老师的课程严...

    99ANYc3cd6 99ANYc3cd6
    2026-04-18
    3 0 0
99ANYc3cd6

99ANYc3cd6

  • 16133文章
  • 0评论
  • 0粉丝
  • 0被赞
最近发布
热门排行
猜您喜欢
热门标签
Copyright © 2022-2025 杰瑞科技汇 版权所有 沪ICP备2024102905号

侵权处理与合作：473708564#qq.com，#换成@就是邮箱

Powered By Z-BlogPHP · Theme By themeolnews