课程速递:HTML5类库CreateJS系列:EaselJ

boyanx2周前技术教程3

本课程介绍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

标签: audio.js

相关文章

膨来仙岛丨搞电竞的都是什么成分?

膨来仙岛丨搞电竞的都是什么成分?

·x-_p-_o-[U2FsdGVkX19hlw/fiNvK0OFuRtSyqfr/bSkpuxPwGJDGjLyXwkFZPmnP7gJKXw749eK4Pq5CM3Oqd6H6jSSQ6XDft...

正版斗士任天堂封禁违法GBA模拟器网站GitHub

对于玩家来说,模拟器是用来回味经典游戏的不二选择,毕竟打开GBA.PS等上世代主机玩游戏还是非常麻烦的,而作为正版斗士的任天堂就决不允许这样的现象成为趋势。有开发者利用HTML5 canvasJava...

用腾讯优图AI视觉模组做一个驾驶疲劳监测仪

道路千万条,安全第一条,相信每个人都是牢记于心的,“喝酒不开车,开车不喝酒”其实不难,难的是防范始料未及的事件,疲倦就是众多始料未及事件中,杀伤力稳居前排的,前一秒心里还在想坚持坚持,下一秒可能就失去...

微软公布JavaScript开源调试工具vorlon.JS发展计划

IT之家讯 5月10日消息,微软在上个月发布了开源调试工具vorlon.JS,这是一款与平台无关、可扩展的JavaScript代码远程调试和测试工具。这款工具采用node.js和socket.io技术...

谷歌Gemini 2.5全线爆发,勇战「濒死恐慌」,却被丝血宝可梦吓到当场宕机

今天,谷歌旗舰Gemini 2.5三箭齐发,首次亮相轻量版2.5 Flash-Lite。最新70页技术报告中,爆料了Gemini 2.5在玩宝可梦濒死时,惊现类人的恐慌,导致推理性能直线下降。昨夜,...

聊天音频泄露至第三方,Clubhouse安全性存疑

澎湃新闻记者 承天蒙 综合报道近期大热的邀请制音频聊天室软件Clubhouse可能被第三方窃听。上周末发生的一起攻击,让Clubhouse的安全问题引发了更多网络专家的担忧。据彭博社2月21日报道,C...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。