写在前面

首先，还是谢谢大家的支持，谢谢！记得在之前的文章中我说过自己算是一个半文艺程序员，也一直想着写一写技术性和其他偏文学性的文章。虽然自己的底子没有多么优秀，但总是觉得这个过程中可以督促自己去思考，督促自己去学习和交流。毕竟每天忙忙碌碌之余，还是要活出自己不一样的生活。

其次，我开通了个人的 GitHub主页，里面有自己的技术文章，还会有个人的随想、思考和日志。以后所有的文章都会第一时间更新到这里，然后同步到其他平台。有喜欢的朋友可以没事去逛逛，再次感谢大家的支持！

什么是CreateJS

官网介绍 （中文）：CreateJS 是一组模块化代码库和工具套件，可以独立工作也可以组合工作，用于通过HTML5技术来在网页上开发丰富的交互式内容。

四个核心库

CreateJS主要包含如下四个类库：

• EaselJS – 简化处理HTML5画布（核心）
• TweenJS – 用来帮助设计H5动画，调整HTML5属性
• SoundJS – 用来简化处理HTML5 audio 音频
• PreloadJS – 帮助管理和协调加载中的一些资源

今天，主要来了解一下 EaselJS 库

EaselJS

EaselJS 简介

EaselJS 是一个JavaScript库,用来简单快捷的操作 HTML5 Canvas 标签。在创建H5游戏，生成艺术作品、处理其他高级图形化等工作中有着很友好的体验。

EaselJS中的一些核心类

1. Stage Class -- 创建舞台
2. Text Class -- 绘制文字
3. Graphics Class -- 绘制图形
4. Shape Class -- 绘制图形
5. Bitmap Class -- 绘制图片
6. Ticker Class -- 定时广播
7. ......等

一些"栗子"

绘制文本(Text Class)

定义一个<canvas> </canvas> 画布。

// HTML:
<!-- Text Class 文本类-->
<canvas id="demo1" width="650" height="400"></canvas>复制代码

调用EaselJS提供的API - new createjs.Text()，绘制文字

// JS
<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
<script>window.onload = () => {/*** Test Class 文本类 -- demo*/let stage1 = new createjs.Stage("demo1");let text1 = new createjs.Text("Text 1 !", "bold 26px Arial", "#ff7700");text1.regX = -50;     // 沿X轴负方向的偏移量text1.regY = -50;     // 沿Y轴负方向的偏移量text1.x = 100;        // 绘制源点 X坐标text1.y = 50;         // 绘制源点 Y坐标let text2 = new createjs.Text("旋转+XY拉伸！", "bold 18px Arial", "#ff7700");text2.x = 50;text2.y = 50;text2.rotation = 50;      // 旋转角度 DEGtext2.scaleX = 3;         // X轴放大(拉伸)text2.scaleY = 2;         // X轴放大(拉伸)let text3 = new createjs.Text("XY轴倾斜", "bold 50px Arial", "#ff7700");text3.x = 300;text3.y = 200;text3.skewX = 45;         // X轴倾斜角度 DEGtext3.skewY = 20;         // Y周倾斜角度 DEGlet text4 = new createjs.Text("文字shadow", "bold 30px Arial", "#ff7700");text4.x = 400;text4.y = 100;text4.shadow = new createjs.Shadow("#000000", 5, 5, 10);      // 创建一个shadow实例Objectstage1.addChild(text1, text2, text3, text4);stage1.update();    // 更新舞台，每次修改操作后需要更新真个舞台才有效果}
</script>复制代码

绘制图形(Graphics Class)

定义一个<canvas> </canvas> 画布。

// HTML:
<!-- Graphics Class 文本类-->
<canvas id="demo2" width="650" height="400"></canvas>复制代码

调用EaselJS提供的API - new createjs.Graphics()，绘制图形

// JS
<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
<script>window.onload = () => {/*** Graphics Class 绘图类 -- demo* 用于生成矢量绘图指令*/let stage2 = new createjs.Stage('demo2')// 画线let g = new createjs.Graphics();/* 同一个 Graphics 实例， 可以多次绘制，以下线段、折线都是用 g 实例绘制的*/g.setStrokeStyle(10).beginStroke("#d23c4f").moveTo(400,10).lineTo(600,100)// 简写形式g.ss(20).s('#fafa35').mt(400,100).lt(400,260)// 多点折线的简写形式g.ss(1).s('#000').mt(600,400).lt(600, 200).lt(400,300).lt(500, 550)// Graphics 实例不能直接 addChild() 到舞台 stage 中，实例化为 Shape 实例后才可以let line = new createjs.Shape(g)// 圆let g1 = new createjs.Graphics();g1.setStrokeStyle(1);         // 描边g1.beginStroke("#000000");    // 描边颜色g1.beginFill("red");          // 图形填充g1.drawCircle(0,0,100);        // 绘制 (X, X, R)let c1 = new createjs.Shape(g1)     // 实例化Shape对象// 矩形let g2 = new createjs.Graphics().beginStroke("red").beginFill("blue").drawRect(150, 0, 200, 100);     // X, Y, W, Hlet c2 = new createjs.Shape(g2)// 命令对象let g3 = new createjs.Graphics();// 每个图形接口调用后会生成一个命令对象，可以使用.command访问，它保存对已创建或附加的最后一个命令的引用let fillCommand = g3.beginFill("green").command;g3.drawCircle(200,200,50);        // 绘制 (X, X, R)let c3 = new createjs.Shape(g3);// 一些异步操作后，更新填充样式/颜色:setTimeout(() => {fillCommand.style = "gray";stage2.update();                // 不更新舞台，不会重新渲染}, 2000);// 点击事件//c3.addEventListener('click', () => {// alert(123)// fillCommand.style = "gray";// stage2.update();          // 不更新舞台，不会重新渲染//})stage2.addChild(c1, c2, c3, line);stage2.update();}
</script>复制代码

绘制图像imgaes(Bitmap Class)

定义一个<canvas> </canvas> 画布。

// HTML:
<!-- Bitmap Class 图像类-->
<canvas id="demo3" width="650" height="400"></canvas>复制代码

调用EaselJS提供的API - new createjs.Bitmap()，绘制图像

// JS
<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
<script>window.onload = () => {/*** bitmap Class 图像类* 用于在画布显示列表中渲染图像*/let stage3 = new createjs.Stage('demo3')// 渲染图片let bitmap = new createjs.Bitmap('./assets/img/hill1.png')bitmap.alpha = 0.6      // 透明度bitmap.cursor = 'help'// 创建一个shadow实例Object(color, offsetX, offsetY, blur)bitmap.shadow = new createjs.Shadow("#97c89e", 20, 10, 20);// 给图片添加遮罩let bitmap2 = new createjs.Bitmap('./assets/img/avatar.jpg')bitmap2.x = 400;        // 图片绘制的起始点X坐标bitmap2.y = 0;          // 图片绘制的起始点Y坐标//遮罩图形let shape = new createjs.Shape();shape.graphics.beginFill('#000').drawCircle(0, 0, 100);shape.x = 500;          // 圆心X坐标shape.y = 100;          // 圆心Y坐标bitmap2.mask = shape;   //给图片bg添加遮罩// 绘制一片草地let groundBg = new createjs.Bitmap("./assets/img/ground.png").image;let ground = new createjs.Shape();w = stage3.canvas.width;      // 650h = stage3.canvas.height;     // 400stage3.addChild(ground)stage3.addChild(bitmap, bitmap2)stage3.update()       // 此处刷新无效// 监听定时广播createjs.Ticker.timingMode = createjs.Ticker.RAF;createjs.Ticker.addEventListener('tick',(event) => {ground.tileW = groundBg.width;ground.y = h - groundBg.height;ground.graphics.beginBitmapFill(groundBg).drawRect(0, 0, w, groundBg.height);ground.cache(0, 0, w, groundBg.height);stage3.update()});}
</script>复制代码

一个小游戏(来自官网Demo) Running man

定义一个

画布

<!-- HTML -->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>running-man game</title>
</head>
<body><canvas id="demoCanvas" width="960" height="400"></canvas></body>
</html>复制代码

JS代码

这里就不写具体思路分析了，代码不长，注释也很详细，方便理解，直接上代码。

// JS
<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
<script>window.onload = () => {let stage, w, h, loader;let sky, grant, ground, hill, hill2;function init() {stage = new createjs.StageGL("demoCanvas");// 获取画布的宽和高，后面计算使用w = stage.canvas.width;     // 960h = stage.canvas.height;    // 400// 定义静态资源let manifest = [{src: "spritesheet_grant.png", id: "grant"}, {     // 人物动作雪碧图src: "sky.png", id: "sky"}, {           // 天空src: "ground.png", id: "ground"}, {     // 地面src: "hill1.png", id: "hill"}, {        // 远山src: "hill2.png", id: "hill2"           // 近山}];     // Array, String, Object// 创建资源加载队列// (Boolean) 用XHR还是用HTML标签来加载// 如果是false的时候，就用标签来加载，如果不能用标签的话，就用XHR来加载。默认是true，用XHR来加载。loader = new createjs.LoadQueue(false);// 添加"资源加载完成"事件loader.addEventListener("complete", handleComplete);// 加载资源loader.loadManifest(manifest, true, "./assets/img/");  // (manifest, loadNow, basePath)}/*** 静态资源加载完成，处理函数*/function handleComplete() {// 渲染天空sky = new createjs.Shape();sky.graphics.beginBitmapFill(loader.getResult("sky")).drawRect(0, 0, w, h);// 定义缓存区域(整个天空的区域))sky.cache(0, 0, w, h);// 渲染地面let groundImg = loader.getResult("ground");ground = new createjs.Shape();// 注意：drawRect()宽度要躲绘制一个单位ground.graphics.beginBitmapFill(groundImg).drawRect(0, 0, w + groundImg.width, groundImg.height);ground.tileW = groundImg.width;ground.y = h - groundImg.height;// 缓存区域(地面的区域)ground.cache(0, 0, w + groundImg.width, groundImg.height);// 随机渲染远处山脉hill = new createjs.Bitmap(loader.getResult("hill"));// 设置图像转换// setTransform([x=0], [y=0], [scaleX=1], [scaleY=1], [rotation=0], [skewX=0], [skewY=0], [regX=0], [regY=0])hill.setTransform(Math.random() * w, h - hill.image.height * 4 - groundImg.height, 4, 4);hill.alpha = 0.5;     // 设置透明度// 随机渲染近处山脉hill2 = new createjs.Bitmap(loader.getResult("hill2"));hill2.setTransform(Math.random() * w, h - hill2.image.height * 3 - groundImg.height, 3, 3);// 创建雪碧图动画let spriteSheet = new createjs.SpriteSheet({framerate: 30,      // 帧率 FPS"images": [loader.getResult("grant")],      // 雪碧图原图"frames": {"width": 165, "height": 292, "count": 64, "regX": 82, "regY": 0},  // 初始化// 定义动画"animations": {"run": [0, 25, "run"],     // name: [开始索引, 结束索引, '下一个动画名称', 倍率]"jump": [26, 63, "run"]}});// 绘制动画grant = new createjs.Sprite(spriteSheet, "run");// 处理雪碧图人物下方空白grant.y = 35;// 将生成的所有内容渲染至舞台stage.addChild(sky, ground, hill, hill2, grant);// 监听舞台上的鼠标点击事件stage.addEventListener("stagemousedown", () => {// 跳转播放 jump 动画grant.gotoAndPlay("jump");});createjs.Ticker.timingMode = createjs.Ticker.RAF;     // RAF / RAF_SYNCHED / TIMEOUTcreatejs.Ticker.addEventListener("tick", tick);}/*** 定时器-重绘舞台*/function tick(event) {// event.delta -- 上一次tick到当前tick的mslet deltaS = event.delta / 1000;// 雪碧图人物移动距离let position = grant.x + 150 * deltaS;// getBounds() -- 返回当前帧相对于雪碧图原点的边界let grantW = grant.getBounds().width * grant.scaleX;grant.x = (position >= w + grantW) ? -grantW : position;ground.x = (ground.x - deltaS * 150) % ground.tileW;// 从右至左移动山脉hill.x = (hill.x - deltaS * 30);// 如果山脉从左侧离开屏幕if (hill.x + hill.image.width * hill.scaleX <= 0) {hill.x = w;     // 重置回屏幕最右侧}// 处理如上hill2.x = (hill2.x - deltaS * 45);if (hill2.x + hill2.image.width * hill2.scaleX <= 0) {hill2.x = w;}stage.update();}// 程序主入口-初始化init()}
</script>复制代码

完整代码

示例demo的GitHub地址：完整代码