CreateJS 学习1 配置

最新推荐文章于 2024-08-13 08:09:23 发布

编程圈子

最新推荐文章于 2024-08-13 08:09:23 发布

阅读量952

点赞数 1

分类专栏： # Canvas WebGL ThreeJS 文章标签： api 模块化

本文链接：https://blog.csdn.net/xundh/article/details/78780912

版权

Canvas WebGL ThreeJS 专栏收录该内容

30 篇文章 5 订阅

订阅专栏

简介

CreateJS是基于HTML5开发的一套模块化的库和工具。
基于这些库，可以非常快捷地开发出基于HTML5的游戏、动画和交互应用。

中文网网址：
http://www.createjs.cc/
API文档：
https://www.createjs.com/docs/easeljs/modules/EaselJS.html
简写API文档：
https://www.createjs.com/docs/easeljs/classes/Graphics.html

CreateJS主要包含了四个类库：

EaselJS - 简化处理HTML5画布
TweenJS - 用来帮助调整HTML5和Javascript属性
SoundJS - 用来简化处理HTML5 audio
PreloadJS - 帮助管理和协调加载中的一些资源

第一个程序：

其中easeljs.min.js可从http://cdn.bootcss.com/EaselJS/0.8.0/easeljs.min.js加载

<html>
    <head>
            <script src="easeljs.min.js" charset="utf-8"></script>
    </head>
    <body onload="init();">
        <canvas id="demoCanvas" width="500" height="300"></canvas>
        <script>
            function init() {
                var stage = new createjs.Stage("demoCanvas");

                var circle = new createjs.Shape();
                circle.graphics.beginFill("DeepSkyBlue").drawCircle(0, 0, 50);
                circle.x = 100;
                circle.y = 100;
                stage.addChild(circle);
                stage.update();
            }
        </script>
    </body>
</html>

方法

获取state

var canvas = document.getElementById("myCanvas");
var stage =new createjs.Stage(canvas);

通过链式操作添加图形

circle.graphics.setStrokeStyle(5).beginStroke("rgba(0,0,0,.5)").beginFill("orange").drawCircle(0,0,50);

通过Ticker类更新图形

//添加一个Ticker类帮助避免多次调用update方法
createjs.Ticker.addEventListener("tick", handleTicker);
function handleTicker(){
stage.update();
}

避免每次绘制图形后，需要调用update。

生成文字

var theText =new createjs.Text("极客标签","normal 32px microsoft yahei","#222222");

编程圈子

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录