CreateJs-EaselJs基础

最新推荐文章于 2024-09-30 16:24:53 发布
最新推荐文章于 2024-09-30 16:24:53 发布
阅读量1.3k 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nep_chan/article/details/92579089
版权

CreateJs内包含四个部分：EaselJS、TweenJS 、SoundJS 、PrloadJS

对应的JS文件可在github上搜索到

easeJs的API

参考的学习链接 createjs入门到精通，后面章节需要付费，以下是其免费章节部分内容为参考编写，案例在教程中都有，这里进行了些注释和改动。

EaselJs

使用前引入js

html的必备部分
<script src="lib/easeljs-NEXT.js"></script> // 或easeljs.js
<canvas id="canvas"></canvas>

基本创建步骤

// 创建舞台
let stage = new createjs.Stage('canvas'); //直接使用canvas的ID
// 创建一个shape对象
let circle = new create.Shape();
// 用画笔设置颜色，这里画的是圆
circle.graphics.beginFill("#58bc58").drawCircle(0, 0, 100, 100);
// 添加到舞台
stage.addChild(rect);
// 刷新舞台
stage.update();

Shape对象层级关系

// canvas标签设置对应的宽高才能显示全，可在标签添加属性，也可js添加属性，如：
let canvas = document.querySelector('#canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 创建舞台，这里是使用元素变量
let stage =new createjs.Stage(canvas);
// 舞台自动更新
createjs.Ticker.on('tick',stage);

// 创建Shape对象
let circle1 = new createjs.Shape();
let circle2 = new createjs.Shape();

// 一般做放大旋转动画都是先指定x,y位移量,不会使用默认的左上角的圆点
circle1.x = circle1.y = 300;
circle2.x = circle2.y = 200;

// 用画笔设置颜色，调用方法画矩形，矩形参数：x,y,w,h
circle1.graphics.beginFill("#58bc58").drawCircle(0,0,150,150);
circle2.graphics.beginFill("pink").drawCircle(0,0,100,100);

// 添加到舞台 存入数组
// 添加多个对象会有层级关系，越后面添加的越排前显示
stage.addChild(circle1);
stage.addChild(circle2);

// 阴影效果，参数：颜色 x轴像素偏移量 y轴像素偏移量 模糊值
circle2.shadow = new createjs.Shadow("#000",0,0,30);

// scaleX,scaleY为shape对象的缩放值属性，执行函数达到缩放效果
function loop (){
    circle1.scaleX +=0.01;
    circle1.scaleY +=0.01;
    if(circle1.scaleX >=2){
        circle1.scaleX = 1;
        circle1.scaleY = 1;
    }
    requestAnimationFrame(loop);
}

loop();

上述代码的运行效果是小圆（circle2）在大圆（circle1）的上面

层级修改方式
// 修改元素的层级
stage.setChildIndex(circle1,1);

// 两元素位置互换，即互换其在中数组位置
stage.swapChildren(circle1,circle2);

// 根据元素下标互换两个元素
stage.swapChildrenAt(0,1);

// 获取元素的下标值，因为一般不容易得知该shape对象的下标
console.log("circle2:"+stage.getChildIndex(circle2));

线

// 虚线，20是每个虚线的长，10是虚线的间隔，直线就是去掉setStrokeDash这个方法
let line = new createjs.Shape();
line.graphics.setStrokeDash([20,10],0).setStrokeStyle(2).beginStroke('pink').moveTo(0,0).lineTo(200,0);
stage.addChild(line);

// 遮罩效果
let rect = new createjs.Shape();
rect.graphics.rect(0,0,100,100).closePath();
let line = new createjs.Shape();
line.graphics.setStrokeDash([20,10],0).setStrokeStyle(3).beginStroke('red').moveTo(0,0).lineTo(200,0);
// 遮罩的rect作为line的mask属性，不需要添加到stage
line.mask = rect;
stage.addChild(line);

createJs事件

具体的查找API

// 有些事件需要允许
stage.enableMouseOver(10);

circle1.on('mouseover',()=>{
    console.log('666');
});

更新性能问题

// 舞台自动更新，会不断执行，消耗性能
createjs.Ticker.on('tick',stage);

// 只更新一次,需要再次更新时设置update为true
var update = true;
function tick(event) {
	if (update) {
		update = false; 
		stage.update(event);
	}
}

高亮效果

// 创建容器，set设置偏移量
let container = new createjs.Container().set({
	x:100,
	y:100
});

// 循环生产正方形，存入容器
for(let i = 0; i<4; i++){
    let rect = new createjs.Shape().set({
        x:100* i,
        y:100* i
    });
    rect.fillCommand = rect.graphics.beginFill("green").command;
    rect.graphics.rect(0,0,100,100);
    container.addChild(rect);
}

// 容器存入舞台
stage.addChild(container);
// 允许执行MouseOver事件
stage.enableMouseOver(10);

// 事件绑定，可以on，也可以addEventListener
container.on('mouseover',(e)=>{
    e.target.fillCommand.style = 'pink';
})

container.on('mouseout',(e)=>{
    e.target.fillCommand.style = 'green';
})

进度条案例

<!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">
    <script src="easeljs.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded',()=>{
            var stage; // 舞台变量
            var loaderBar; // 加载条图形
            var loadInterval; // 执行间隔
            var LOADER_WIDTH = 400;  // 进度条宽度
            var percentLoaded = 0; //进度百分比
            init();

            function init(){
                setupStage(); // 设置舞台
                buildLoaderBar(); // 创建加载条
                startLoad(); // 开始加载条
            }

            // 设置舞台函数
            function setupStage() {
                stage = new createjs.Stage('canvas');
                // 手动刷新舞台
                createjs.Ticker.addEventListener('tick', runGame);
                createjs.Ticker.setFPS(60);
            }

            function runGame(e) {
                stage.update();
            }

            // 创建加载条函数
            function buildLoaderBar() {
                loaderBar = new createjs.Shape();
                loaderBar.x = loaderBar.y = 50;;
                // 设置笔画的宽度/指定描边颜色/画图
                loaderBar.graphics.setStrokeStyle(2).beginStroke().drawRect(0, 0, LOADER_WIDTH, 40);
                // 添加到舞台
                stage.addChild(loaderBar);
            }


            // 运行加载条函数
            function startLoad() {
                loadInterval = setInterval(updateLoad, 50);
            }

            function updateLoad(){
                // 百分比数值叠加
                percentLoaded += .005;
                // 重新画进度条
                updateLoadBar();
                // 条满时清楚定时器
                if (percentLoaded >= 1){
                    clearInterval(loadInterval);
                    stage.removeChild(loaderBar);
                }
            }

            function updateLoadBar() {
                // 进度的矩形
                loaderBar.graphics.beginFill('#00ff00').drawRect(0, 0, LOADER_WIDTH * percentLoaded, 40).endFill();
                // 描边的矩形
                loaderBar.graphics.setStrokeStyle(2).beginStroke("#000").drawRect(0, 0, LOADER_WIDTH, 40).endStroke();
            }
        })
    </script>
</head>
<body>
    <canvas id="canvas" width="600" height="400"></canvas>
</body>
</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">
    <script src="easeljs.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded',()=>{
            var stage;
            var rectLen = 100; // 方形长度
            init();

            function init(){
                stage = new createjs.Stage('canvas');
                createjs.Ticker.addEventListener("tick", handleTick);
                createjs.Ticker.setFPS(60);
                start();
            }
            
            function handleTick(e){
                stage.update();
            }

            function start(){
                var rect = new createjs.Shape();
                rect.graphics.beginFill('pink').drawRect(0, 0, rectLen, rectLen);
                rect.x = rect.y = 100;
                
                // 获取当前鼠标位置
                rect.addEventListener('mousedown', function(e) {
                    // 定义全局变量 e.stageX/Y 即为鼠标当前坐标
                    oldX = e.stageX;
                    oldY = e.stageY;
                })

                rect.addEventListener('pressmove', function(e) {
                    rect.x = rect.x - oldX + e.stageX;
                    rect.y = rect.y - oldY + e.stageY;
                    // 因pressmove是持续触发的事件，避免oldX和e.stageX之间的差值剧增而重新赋值
                    // 总之就是更新坐标
                    oldX = e.stageX;
                    oldY = e.stageY;
                })

                stage.addChild(rect);
            }
        })
    </script>
</head>
<body>
    <canvas id="canvas" width="800" height="800"></canvas>
</body>
</html>

旋转案例

旋转用到tweenjs，需要引入

<!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">
    <script src="easeljs.js"></script>
    <script src="tweenjs-NEXT.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded',()=>{
            var stage = new createjs.Stage('canvas');
            createjs.Ticker.on('tick',stage);

            // 画图方法Graphics，并不会显示，如果要显示，就需要Shape
            var g = new createjs.Graphics().beginStroke('#000').beginFill('#FF6600').drawRect(0,0,100,100);
            var square = new createjs.Shape(g);
            
            // 设置shape对象相对stage的偏移量
            square.x = square.y = 100;
            stage.addChild(square);

			// 设置注册点的偏移量，没设置就按默认的左上角(0,0)旋转
            square.regX = square.regY = 50;
            createjs.Tween.get(square).to({
                rotation: 360
            }, 3000);
        })
    </script>
</head>
<body>
    <canvas id="canvas" width="400" height="400"></canvas>
</body>
</html>
katsukichan
关注
createjs.js
07-06
简单的html5和js的结合，制作小游戏必备js.
createjs easeljs
宝码香车的博客
09-04 171
sdf
鸿蒙(HarmonyOS)实战开发篇——基于C++能力的资源访问
最新发布
lc748258的博客
09-30 819
获取拥有读/写权限的文件URI，当前需要在arkts侧获取并通过NAPI的方式将uri传递给C++侧，如通过picker获取对应uri，再将uri传递到c++侧。
createjs
weixin_33728708的博客
12-18 229
转载于:https://www.cnblogs.com/liuliang389897172/p/10136687.html
canvas 动画库 CreateJs 之 EaselJS（上篇）
weixin_34401479的博客
09-28 354
本文来自网易云社区作者：田亚楠须知本文主要是根据 createjs 中的 EaselJS 在 github 上的 tutorials 目录下的文章整理而来 （原文链接），同时也包含了很多本人的理解，如过有叙述不当的地方，请联系我 :-D 本文对原文中的一些知识点的解释进行了删减，对另外一些进行了扩展，同时对文中的 demo 进行了改写，如果感到阅读困难的话请参考原文（本文中有对应的原文链接）如果文...
createjs之Easeljs
weixin_34111790的博客
09-18 291
Easeljs是什么 easeljs是在HTML5构建高性能2D交互的库，它提供了功能丰富的显示列表去允许你操作以及设置动画于图形。同时它对于鼠标以及移动端触摸交互提供了强劲的交互模型。它在构建游戏，广告，数据可视化，以及其他高度图形化方面表象优秀，他可以独立工作，也可以配合createjs其他模块如：soundjs，preloadjs，...
createjs-wechat:createjs-微信
05-29
结合微信的环境，【createjs-wechat】项目为微信平台上的互动体验开发提供了一个可靠的基础，让开发者可以轻松地制作出吸引人的H5游戏和应用。如果你想要在微信上创建丰富的用户交互体验，了解和掌握CreateJS及它的...
CreateJS-boilerplate:GGJ 2015
07-05
【描述】"CreateJS-样板 GGJ 2015" 暗示这个项目是CreateJS的一个基础模板，为GGJ的参与者提供了一个起点，包含了必要的结构和资源，使他们能够快速开始构建2D游戏。CreateJS是一个集合了多个JavaScript库的开源套件...
createjs-boilerplate:以您的互联网连接速度开始制作游戏
06-30
CreateJS是一个强大的JavaScript库，它集合了EaselJS、TweenJS、SoundJS和PreloadJS等多个子项目，为Web游戏开发提供了全方位的支持。而`createjs-boilerplate`则是一个专门为创建基于CreateJS的游戏项目提供的起始...
HTML5 开发框架CreateJS EaselJS-release_v0.7.1.zip
10-07
通过这些基础元素，开发者可以构建出丰富多彩的用户界面和游戏场景。例如，`createjs.Shape`类允许开发者使用简单的路径命令创建自定义图形，而`createjs.Bitmap`类则用于加载和显示图像资源。 EaselJS还包含了一些...
如何使用Createjs来编写HTML5游戏（八） 通过继承扩展EaselJS中的基础元素
失业矿工的博客
08-10 3354
从我第一天了解到javascript开始，就听说在这里是没有类的。其实一开始我是沮丧的，尽管我并不知道有没有“类”对编程究竟有多大影响，不过有缺憾总是让人感觉遗憾，哪怕这是一个你可能永远不会用到的东西。确实，在没有任何自定义“类”的情况下，也能做出一款打飞机的游戏。 我们用到的是EaselJS中所定义的一些可以重复使用的对象，并且这些对象包含一些类似于类的行为，比如可以new 一个新的对象实例。...
createjs-doc:CreateJS 中文文档
05-16
createjs-doc CreateJS 中文文档 CreateJS 一共分为四个部分 EaselJS 主要负责Canvas绘图的部分 TweenJS 主要负责动画效果，与EaselJS 完全结合，支持链式调用 SoundJS 主要负责声音的管理，具备完善的兼容处理 PreloadJS 主要负责加载各种资源，采用XHR2实现，提供了实时进度和多队列支持 官方文档 (英文)
CreateJS开发框架 - HTML5游戏开发引擎
04-30
CreateJS是众多html5开发框架之一 有EaselJS PreloadJS SoundJS TweenJS等文档说明和源码 CreateJS为CreateJS库，可以说是一款为HTML5游戏开发的引擎。
createjs开发教程
Wangxinlei_King的博客
09-13 615
createjs是一个非常优秀的开发引擎，特别是与AnimateCC的合作开发。为了让更多新人更好的学习这款引擎，本人开了博客，不过最早是在新浪开博客，后来自己申请服务器开了博客，不过至今流量不高，所...
CreateJS介绍-了解CreateJS
01-12 349
1、CreateJS 　　一款HTML5游戏开发引擎 　　CreateJS 是一套可以构建丰富交互体验的 HTML5 游戏的开源工具包，旨在降低 HTML5 项目的开发难度和成本，让开发者以熟悉的方式打造更具现代感的网络交互体验。 CreateJS 中包含四款工具： 　　EaselJS：用来处理HTML5的canvas 　　　　　　　　用于 Sprites、动画、向量和位图的绘...
createjs入门
細水、長流√的专栏
05-17 2352
createjs是一个轻量级的框架，稍微有点时间和耐心，就可以把全部源代码都看一遍，毕竟只有三十几个js文件。地址：http://www.createjs.com/ 开发createjs的动画或游戏，没有重型的IDE或什么工具支持，我们只能从零开始写js。一方面，这样对于jser来说，足够灵活；另外一方面，createjs因此足够精简足够小。 createjs由几个库组成： l easeljs，这个是核心，包括了显示列表、事件机制； l preloadjs，用于预加载图片等； l tweenjs，
Hello Createjs
游戏设计
12-11 673
前言在这样H5盛行的年代，我也来蹭蹭热度，首先就是到处找学习资料。在我学习过程中发现好多教程都有介绍一个叫Createjs的东西（一般都是放到教程最后补充讲的），现在我们就来好好研究下Createjs是个什么东东。由于是初次学习，所有难免出现各种不合理的，错误的地方，还请大神指点出来。这也就算是我的一个学习笔记吧，勉强当个教程吧。 先来看看Createjs的简介： CreateJS是基于HTML5
CreateJS Zoe
gitblog_00038的博客
03-16 249
CreateJS Zoe 去发现同类优质开源项目:https://gitcode.com/ 是一个强大的工具，用于创建高质量的矢量动画。它可以帮助设计师和开发者快速地创作出富有表现力的动态图形，并将它们轻松集成到网页、游戏和其他互动应用中。 功能与用途 CreateJS Zoe 提供了一系列简单易用的功能，让你可以专注于设计，而不是技术细节。以下是 Zoe 的一些主要功能： 矢量图动画：Zoe ...
CreateJS 指南
qq_26642611的博客
10-20 830
https://zhuanlan.zhihu.com/p/40799542 简介 CreateJS是基于HTML5开发的一套模块化的库和工具，基于这些库，可以非常快捷地开发出基于HTML5的游戏、动画和交互应用。 历史可以追溯到7年前 flash 使用慢慢变少那个时代，gskinner 开发它作为“下一代”的富交互的工具库，Adobbe、微软、火狐官方资助的一个项目，API 在很多地方和 Flash 是很像，同时可以通过Adobe Animate CC（替代 flash）直接导出Canvas在Web中使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值