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

入门createjs———easelJS教程(1)绘制一个圆形

2014-11-21 09:44 639 查看

文档的初始化

<!DOCTYPE html>
<html>
<head>
<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script><pre name="code" class="html">    //引入easeljs
<script>
function init() {
// 下面我们将插入操作画布的JS代码
}
</script>
</head>
<body onLoad="init();">
<canvas id="demoCanvas" width="500" height="300">

</canvas>
</body>
</html>



canvas标记在第12行有一个id,这样我们很容易可以引用,以及定义的宽度和高度。重要的是要理解,这里的宽度和高度属性设置画布的像素尺寸。

如果你动态改变CSS的宽度和高度,将规模画布和图形可能会模糊或粗糙。

创建图形
创建图形的首先我门得 创建一个舞台，所有的图形都在 上面绘制。（和FLASH的舞台差不多）

var stage = new createjs.Stage("demoCanvas");


这一行在ID为demoCanvas画布上初始化了一个舞台

创建一个形状
下面的代码我们创建了一个图形，并在demoCanvas上给了他定位

var circle = new createjs.Shape();
circle.graphics.beginFill("red").drawCircle(0, 0, 50); //在舞台上绘制了一个红色的圆<strong>圆心处</strong>从0，0处开始
circle.x = 100;         //将圆的X坐标定义到100
circle.y = 100;         //将圆的Y坐标定义到100
stage.addChild(circle);     //将圆添加到舞台上


EaselJS还支持简写让你调用链在一起。事实上,如果你真的想要你可以写在一行上面的所有代码:就和JQUERY一样

stage.addChild(new createjs.Shape()).setTransform(100,100).graphics.f("red").dc(0,0,50);
因为graphics类中的函数名过长，easeljs提供了简写的模式。



更多详细的参见Graphics Class ,官方在线文档的地址点击打开链接  


上面的F就等同于beginFill,dc等同于drawCircle

更新舞台
在画布上绘制好了图形，不要忘记了最后一步更新画布

stage.update();


这个阶段就把舞台中所有的对象添加到网页的画布中。

示例网页：点击打开链接
                                            

                                        

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

                    

                    

                        

                         标签： 
                                                canvas
                                                html
                                                createJs
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航