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

StarsInSun

于 2014-11-21 09:44:30 发布

阅读量3.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： EaselJS 文章标签： canvas html createJs

本文链接：https://blog.youkuaiyun.com/StarsInSun/article/details/41344251

本文档介绍了如何使用createJS的EaselJS库在canvas上初始化、创建图形，特别是绘制圆形的方法。首先讲解了canvas元素的初始化，强调了宽度和高度设置的重要性。接着，展示了创建舞台和形状的步骤，通过代码实例说明了如何创建并定位圆形。最后，提到了更新舞台以显示图形的关键步骤。完整示例和官方文档链接供读者深入学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文档的初始化

<!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上给了他定位

最低0.47元/天解锁文章

200万优质内容无限畅学