helloword[createjs]--编程之路,记录点滴,认真生活

首先，让我们通过一个简单的示例查看CreateJS的外观。将以下代码复制并粘贴到HTML文件中，然后在浏览器中将其打开，您将在屏幕上看到一个红色圆圈。

<html>
<head>
  <meta charset="utf-8" />
  <script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
  <script>
    window.addEventListener("load", init);

    function init() {
      // Stageオブジェクトを作成します
      var stage = new createjs.Stage("myCanvas");

      // 円を作成します
      var shape = new createjs.Shape();
      shape.graphics.beginFill("DarkRed"); // 赤色で描画するように設定
      shape.graphics.drawCircle(0, 0, 100); //半径 100px の円を描画
      shape.x = 200; // X 座標 200px の位置に配置
      shape.y = 200; // Y 座標 200px の位置に配置
      stage.addChild(shape); // 表示リストに追加

      // Stageの描画を更新します
      stage.update();
    }
  </script>
</head>
<body>
  <canvas id="myCanvas" width="640" height="320"></canvas>
</body>
</html>

CreateJS使用HTML5 canvas元素。canvas元素是显示内容的绘图区域。让我们至少为元素设置canvas三个属性id（ID值），width（宽度）和height（高度）。

<body> <canvas id="myCanvas" width="960" height="540"></canvas> </body>

接下来，加载JavaScript库。CreateJS是一个JavaScript库，但是只能通过加载来使用CreateJS。

<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>

页面加载完成后，将执行特定过程。addEventListener()使用一个函数load监视事件并指定要在页面加载完成后执行的函数。init()在此函数中编写CreateJS的代码。

<script> window.addEventListener("load", init); function init(){ // 処理 } </script>

从这里，init()我们将在函数中编写代码。首先createjs.Stage，使用该类创建一个舞台。指定createjs.Stagecanvas元素的id值作为该类的参数。stage您可以将变量视为一个阶段。

// Stageオブジェクトを作成。表示リストのルートになります。 var stage = new createjs.Stage("myCanvas");

* createjs.Stage有关如何使用该类的详细信息，请参阅“ 官方文档（英语） ”。

createjs.Shape使用类创建圆形形状（形状）。

* createjs.Shape类功能将在后面详细描述。您此时无需了解如何绘制图形。

// 円を作成します var shape = new createjs.Shape(); shape.graphics.beginFill("DarkRed"); // 赤色で描画するように設定 shape.graphics.drawCircle(0, 0, 100); //半径100pxの円を描画

尽管我们创建了形状（shape），但是上面的代码仅在程序中创建，因此我们需要使它出现在舞台上并使其可见。addChild()是出现在舞台上的必要指示。

stage.addChild(shape); // 表示リストに追加

最后，将CreateJS处理的结果应用于canvas元素。stage.update()让我们使用一个函数来反映它。

// Stageの描画を更新 stage.update();

* update()有关如何使用该方法的详细信息，请参阅“ 官方文档（英文） ”。

这是CreateJS的简单示例。让我们一一理解。