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

来源：互联网发布：城市公园命名数据库编辑：程序博客网时间：2024/06/06 12:51

文档的初始化

<!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坐标定义到100circle.y = 100;         //将圆的Y坐标定义到100stage.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();

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

示例网页：点击打开链接

0 0