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

boyanx5个月前技术教程16

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

相关文章

SiriWave:用 JavaScript 开发的 Siri 风格音频波形

大家好,很高兴又见面了,我是"高级前端进阶",由我带着大家一起关注前端前沿、深入前端底层技术,大家一起进步,也欢迎大家关注、点赞、收藏、转发,您的支持是我不断创作的动力。什么是 Sir...

p5.js 中文入门教程

本文简介点赞 + 关注 + 收藏 = 学会了本文的目标是和各位工友一起有序的快速上手 p5.js ,会讲解 p5.js 的基础用法。本文会涉及到的内容包括:项目搭建p5.js 基础2D图形文字图形样式...

创建酷炫动画效果的10个JavaScript库

Dynamics.js是设计基于物理规律的动画的重要JavaScript库。它可以赋予生命给所有包含CSS 和SVG属性的DOM(文本对象模型)元素,换句话说,Dynamics.js适用于所有Java...

开源人声分离音频标注工具—基于Python

前言之前一篇介绍过音频标注开源工具包,大家反馈不错,今天介绍一个更易用专用性的人声分离音频标注开源工具,工具地址在文末。工具简介此工具是基于wavesurfer.js与Flask开发。提供Web界面进...

免费的网页版全功能合成器 Droid Resonator,还支持 MIDI 等多项功能

Droid Resonator 是一个基于浏览器的、免费的网页版合成器,使用 HTML/JS/CSS 和 Tone.js 构建。它具有6声部的和声功能(可演奏和弦) ,每个声部有3个压控振荡器(VCO...

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

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

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

发表评论    

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