Hello Createjs

龍天下丿

于 2017-12-11 16:23:25 发布

阅读量651

点赞数 2

分类专栏：我的CreateJs之旅文章标签： html5 Createjs

本文链接：https://blog.csdn.net/oHappyKing12/article/details/78753563

版权

我的CreateJs之旅专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前言

在这样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();

这句话一定要写不然舞台不会显示任何东西

龍天下丿

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Hello Createjs

前言在这样H5盛行的年代，我也来蹭蹭热度，首先就是到处找学习资料。在我学习过程中发现好多教程都有介绍一个叫Createjs的东西（一般都是放到教程最后补充讲的），现在我们就来好好研究下Createjs是个什么东东。由于是初次学习，所有难免出现各种不合理的，错误的地方，还请大神指点出来。这也就算是我的一个学习笔记吧，勉强当个教程吧。先来看看Createjs的简介： CreateJS是基于HTML5
复制链接

扫一扫

专栏目录