您的位置：首页 > Web前端 > JavaScript

认识CreateJs（一）：添加文本图形

2016-07-13 14:22 681 查看
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引入，代码如下：
<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();


 

             

         

                          

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                html5
                                                canvas
                                                javascript
                                                图形
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航