认识CreateJs(一):添加文本图形
2016-07-13 14:22
756 查看
CreateJS
[align=left]一、认识CreateJS
[/align]
CreateJS是一套可以构建丰富交互体验的 HTML5 游戏的开源工具包,旨在降低 HTML5 项目的开发难度和成本,让开发者以熟悉 的方式打造更具现代感的网络交互体验。
CreateJS 中包含五款工具:
①easeJS:用于 Sprites、动画、向量和位图的绘制,用来处理HTML5的canvas;
②tweenJS:用来处理HTML5的动画调整和javascript属性,用于制作类似 Flash 中“补间动画”的引擎。
③soundJS:用来帮助简化处理音频相关的API,将音频文件作为模块,可随时加载和卸载。
④proloadJS:管理和协调程序加载项的类库,帮助你简化网站资源预加载工作,图形、视频、声音、JS、数据……
⑤ZOE:将swf动画导出为EaseIJS的sprite的工具。
二、如何使用CreateJS
基于这些库,可以非常快捷地开发出基于HTML5的游戏、动画和交互应用。运行环境请使用Safari, Chrome, Firefox 或 IE 9+ 。
1、在官网下载类库,将min.js引入,代码如下:
2、创建Canvas标签, 代码如下:
3、编写js代码,首先使用canvas标签创建stage,我们在Createjs中用到的元素都要添加在stage上,最后调用stage.update()方法使添加的元素都显示在页面上。代码如下:
⑴创建stage,有两种方法
⑵Createjs中的所有元素都通过调用new create.xxxx来创建; eg1.添加文本,创建一个Text,包含三个参数,分别为显示的文本字符;字体大小类型;字体颜色。
eg2.添加图形,创建shape,还需要创建一个Graphics; 可以这样理解:shape只是一块画布,而Graphics才真正能画出图形。
效果如下:
另外,我们可以给图形设置缩放效果,如下给x轴缩放代码:
效果图:
设置图形中心点,代码如下:
还可以增加点阴影效果,代码如下:
最后不要忘记给stage添加上shape,再调用;
[align=left]一、认识CreateJS
[/align]
CreateJS是一套可以构建丰富交互体验的 HTML5 游戏的开源工具包,旨在降低 HTML5 项目的开发难度和成本,让开发者以熟悉 的方式打造更具现代感的网络交互体验。
CreateJS 中包含五款工具:
①easeJS:用于 Sprites、动画、向量和位图的绘制,用来处理HTML5的canvas;
②tweenJS:用来处理HTML5的动画调整和javascript属性,用于制作类似 Flash 中“补间动画”的引擎。
③soundJS:用来帮助简化处理音频相关的API,将音频文件作为模块,可随时加载和卸载。
④proloadJS:管理和协调程序加载项的类库,帮助你简化网站资源预加载工作,图形、视频、声音、JS、数据……
⑤ZOE:将swf动画导出为EaseIJS的sprite的工具。
二、如何使用CreateJS
基于这些库,可以非常快捷地开发出基于HTML5的游戏、动画和交互应用。运行环境请使用Safari, Chrome, Firefox 或 IE 9+ 。
1、在官网下载类库,将min.js引入,代码如下:
<script src="easeljs-0.8.1.min.js" type="text/javascript" charset="utf-8"></script>
2、创建Canvas标签, 代码如下:
<body onload = "init()"> <canvas id="box" width="965" height="700" > <span>当前浏览器不支持Canvas标签</span>
</canvas> </body>
3、编写js代码,首先使用canvas标签创建stage,我们在Createjs中用到的元素都要添加在stage上,最后调用stage.update()方法使添加的元素都显示在页面上。代码如下:
⑴创建stage,有两种方法
① var canvas = document.getElementById("box"); var stage = new createjs.Stage(canvas); ② var stage = new createjs.Stage("box");
⑵Createjs中的所有元素都通过调用new create.xxxx来创建; eg1.添加文本,创建一个Text,包含三个参数,分别为显示的文本字符;字体大小类型;字体颜色。
function init(){ var stage = new createjs.Stage("box"); var txt = new createjs.Text("HELLO","26px Times","#000"); txt.x = 200; //改变txt X的坐标(在canvas中距离 左侧 的坐标) txt.y = 300; //改变txt Y的坐标(在canvas中距离 顶部 的坐标) txt.text = "LOVE!"; //改变txt的文本内容 txt.textAlign = "center"; //水平居中 txt.textBaseline = "middle"; //垂直居中 stage.addChild(txt); //完成之后需要添加到stage中才能正常显示 stage.update(); //调用updata更新 }
eg2.添加图形,创建shape,还需要创建一个Graphics; 可以这样理解:shape只是一块画布,而Graphics才真正能画出图形。
var shape = new createjs.Shape( ); shape.graphics.setStrokeStyle(5).beginStroke("red").beginFill("gray").drawRect(0, 0, 200, 100); // setStrokeStyle是设置边框的粗细大小, beginStroke("#000")是设置边框颜色, // beginFill("red")是设置填充的颜色,最后drawRect(0,0,100,150);是在(0,0)位置绘制一个100*150的方形。 // drawCircle(0,0,30)是在(0,0)位置绘制一个半径30的圆。
效果如下:
另外,我们可以给图形设置缩放效果,如下给x轴缩放代码:
shape.scaleX =0.5;
效果图:
设置图形中心点,代码如下:
shape.regX = 100; shape.regY = 100; //改变的是图形的中心点,若改为100,100,即表示图形开始显示的坐标为(100,100),但是在在画布中还是在(0,0)显示 //如果图形是200,200,那么这样只会显示一半。另外一半被遮盖起来。
还可以增加点阴影效果,代码如下:
shape.shadow = new createjs.Shadow("#000",2,2,8);
最后不要忘记给stage添加上shape,再调用;
stage.addChild(shape); stage.update();
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- HTML5中在客户端验证文件上传的大小
- html5 web数据存储
- 最后一次说说闭包
- Ajax
- HTML5调用摄像头实例
- 页面元素查找之Selectors API
- 使用ajax实现用户登录验证(升级版)
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)
- JavaScript拆分字符串时产生空字符的原因