当前位置：网站首页 > 技术文章 > 正文

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

zhezhongyun 2025-01-17 14:27 52 浏览

本课程介绍HTML5类库套件createJS之一的EaselJS的基础使用，EaselJS用来帮助简化处理HTML5画布的相关功能

第一节：EaselJS基础使用介绍

CreateJS是一套包含了各种方便开发HTML5应用的Javascript类库和工具的套件，主要包含如下四个类库：

基础使用

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

HTML5 标签

相关推荐