网站首页 > 教程文章 正文
本课程介绍HTML5类库套件createJS之一的EaselJS的基础使用,EaselJS用来帮助简化处理HTML5画布的相关功能
第一节:EaselJS基础使用介绍
CreateJS是一套包含了各种方便开发HTML5应用的Javascript类库和工具的套件,主要包含如下四个类库:
EaselJS - 简化处理HTML5画布
TweenJS - 用来帮助调整HTML5和Javascript属性
SoundJS - 用来简化处理HTML5 audio
PreloadJS - 帮助管理和协调加载中的一些资源
基础使用
EaselJS 使用比较简单,它提供了一套完整,层次化显示列表的互动方式来更简单的处理HTML5画布
首先在HTML中定义一个画布元素,然后使用显示列表的顶级容器Stage来处理画布,如下:
<canvasid="myCanvas"width="320"height="200"></canvas>
再使用如下即可获取stage:
varcanvas=document.getElementById("myCanvas");varstage=newcreatejs.Stage(canvas);
添加相关图形
EaselJS包含了很多的Graphics类,用来帮助处理图形相关的操作,使用方法类似原生的画布,但是添加了一些自己的方法,通常情况下我们不直接处理Graphics,而使用Shape类来处理,注意相关方法是可以使用链式操作滴。
circle.graphics.setStrokeStyle(5).beginStroke("rgba(0,0,0,.5)").beginFill("orange").drawCircle(0,0,50);
注意生成的图形必须使用addChild添加到stage中,并且最后需要调用update方法来更新Stage
第二节:EaselJS生成更多图形
使用EaselJS的Graphics类可以生成很多不同的图形,本节将展示生成圆形,矩形和多角形
第三节:避免多次的调用update方法
上一节代码中,我们每次绘制一个图形后,都需要调动update方法来更新stage,如果图形太多,可能过程会很繁琐,在createjs中提供了一个Ticker类,可以帮助解决这个麻烦事,如下:
//添加一个Ticker类帮助避免多次调用update方法createjs.Ticker.addEventListener("tick",handleTicker);functionhandleTicker(){stage.update();}
这样绘制图形后,就不必调用相关update方法啦
第四节:使用Shape类方便的修改图形相关属性
Shape类提供了一些属性可以方便的修改图形的相关属性,例如:
坐标位置
图形缩放
透明度
旋转效果
鼠标点击或者移动事件
本节相关代码将生成5个不同属性的圆形,并且给每一个圆形都添加相关的鼠标事件,例如,点击,鼠标移动出图形等
第五节:EaselJS生成文字
使用EaselJS生成文字非常简单,如下:
vartheText=newcreatejs.Text("极客标签","normal32pxmicrosoftyahei","#222222");
调用Text类即可快速生成需要的文字
开始学习课程:
http://www.gbtags.com/gb/gbliblist/106.htm
猜你喜欢
- 2025-04-30 很少人知道的20个最好用的免费设计软件
- 2025-04-30 2015年16个最佳的免费响应式HTML5框架
- 2025-04-30 学习使用easelJS类库控制HTML5游戏角色的移动和跳跃
- 2025-04-30 面向HTML5 画布的JavaScript库Top10
- 2025-04-30 课程速递:HTML5类库CreateJS系列二
- 2025-04-30 《响应式开发》16个最佳响应式HTML5框架分享
- 2025-04-30 HTML5画布类库EaselJS生成鼠标控制的游戏动画人物
- 最近发表
-
- 一个可以用来练手的C++开源编译器!
- Linux开发工具使用指南(linux软件开发工具)
- Linux下Makefile文件的模式规则和自动化变量
- 程序员的副业秘籍!一款可以快速搭建各类系统的后台管理系统
- postgresql自定义函数实现,通过contrib模块进行扩展
- Linux GCC编译及Makefile使用(gcc makefile编写)
- wordpress独立站上线两周没收录?原来是robots.txt搞的鬼…
- make sure用法解析(make sure sth)
- 每天一个 Python 库:Django全能Web框架,一站式后台开发
- Makefile实践(makefile经典教程)
- 标签列表
-
- location.href (44)
- document.ready (36)
- git checkout -b (34)
- 跃点数 (35)
- 阿里云镜像地址 (33)
- qt qmessagebox (36)
- mybatis plus page (35)
- vue @scroll (38)
- 堆栈区别 (33)
- 什么是容器 (33)
- sha1 md5 (33)
- navicat导出数据 (34)
- 阿里云acp考试 (33)
- 阿里云 nacos (34)
- redhat官网下载镜像 (36)
- srs服务器 (33)
- pico开发者 (33)
- https的端口号 (34)
- vscode更改主题 (35)
- 阿里云资源池 (34)
- os.path.join (33)
- redis aof rdb 区别 (33)
- 302跳转 (33)
- http method (35)
- js array splice (33)