前言
在这样H5盛行的年代,我也来蹭蹭热度,首先就是到处找学习资料。在我学习过程中发现好多教程都有介绍一个叫Createjs的东西(一般都是放到教程最后补充讲的),现在我们就来好好研究下Createjs是个什么东东。由于是初次学习,所有难免出现各种不合理的,错误的地方,还请大神指点出来。这也就算是我的一个学习笔记吧,勉强当个教程吧。
先来看看Createjs的简介: CreateJS是基于HTML5开发的一套模块化的库和工具。 基于这些库,可以非常快捷地开发出基于HTML5的游戏、动画和交互应用。这里是官网还是中文的。这里有Createjs一整套的源码,可供下载 。
一、下载源码
Createjs一共提供了4个小分类 EaselJS TweenJs SoundJS PreloadJS
这里我们先研究第一个,EaselJS,他提供了一套完整的,层次化的显示列表的互动交互方式,来更简单的处理HTML5画布。
1官网下载:
打开官网按步骤一步一步操作
2gitub下载:
github地址
其实官网也是从这里下载的
解压下载的文件。在解压的文件中找到lib文件夹,该文件夹中就是我们需要的源码。这里我们使用未压缩的版本easeljs.js。压缩版本easeljs.min.js一般只在项目发布的时候使用。
二、搭建一个简单的Createjs场景
搭建一个简单的Createjs场景。
我们的目标是: 在网页上生成一个圆形
效果
首先是网页部分, 我们先搭建一个标准的网页开发环境,
1 找一个空白的文件夹,新建文件夹
文件夹js(存放所有的js脚本 包括我们需要学的EaselJs源文件)
文件夹CSS(存放css样式表,这里用的并不是太多)。
index.html文件(网页)
整个文件列表如下:
2 index.html代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
<!-- 引用外部EaselJS库-->
<script type="text/javascript" src="js/easeljs.js"></script>
<!-- 添加自己的JavaScript代码-->
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<div>
<!-- 添加canvas标签 careateJs所有操作将在此标签下进行,这和原生的HTML一样-->
<canvas id="Game" width="550" height="400"></canvas>
</div>
</body>
</html>
3 index.js代码如下
//当网页加载完成
window.onload = function()
{
initGame();
}
//声明舞台
var stage;
//声明圆形显示对象
var circleShape;
//初始化游戏
function initGame()
{
//创建舞台 这里的 "Game" 对应的是index.html页面中canvase的id
//也就是告诉网页我的舞台就是你的canvas
stage = new createjs.Stage("Game");
//Shape类和Flash中的Shape类类似,包含了所有的绘图功能,比如
//drawRect 绘制矩形
//drawCircle 绘制圆形
//drawRoundRest 绘制圆角矩形
//.....
circleShape = new createjs.Shape();
//为圆形图像设置填充颜色
//这里的颜色 是一种CSS中设置的颜色,也就是说CSS中怎么设置颜色 这就怎么设置
// "#ff000" "rgb(255,0,0)" "rgba(255,0,0,0.2)" "red"
//但需要注意的是 必须要用引号括起来
circleShape.graphics.beginFill("#00ff00");
//绘制圆形图像 在坐标点(0,0) 绘制半径为50的圆
circleShape.graphics.drawCircle(0,0,50);
//结束绘制
circleShape.graphics.endFill();
//将绘制好的圆形图像添加到舞台中
stage.addChild(circleShape);
//设置圆形图像的坐标点
circleShape.x = 100;
circleShape.y = 100;
//更新舞台 这一步不能少 不然舞台不会显示任何东西
stage.update();
}
4 运行效果如下
三、梳理一下
1 创建舞台
//"Game" 对应网页中canvas的id
var stage = new createjs.Stage("Game");
2 绘图类Shape 绘制各类矢量图形 (后面具体再讲)
3 beginFill填充颜色
这里的颜色设置和CSS中的颜色设置一样
- 英文单词 “red” “green” 等等
- 十六进制 “#ff0000”
- rgb “rgb(255,0,0)”
参数1 红色 0~255
参数2 绿色 0~255
参数3 蓝色 0~255 - rgba “rgba(255,0,0,0.4)”
参数1 红色 0~255
参数2 绿色 0~255
参数3 蓝色 0~255
参数4 透明度 0~1
4将显示对象添加到舞台
stage.addChild(circleShape)
至于显示对象是什么 后面再讲 现在只要知道我们创建的圆形图像就是一个显示对象
5刷新舞台
stage.update();
这句话一定要写 不然舞台不会显示任何东西