Question

我正在与Easel JS和Canvas惨败（并且失败）。我对画布有点新意，也学习JS。我基本上试图制作一个画布，我可以用颜色更新，通过点击按钮传递。

I have made a Fiddle to show my work so far.

<!DOCTYPE html>

<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <title>IllustratorSetup</title>
  <script src="https://code.createjs.com/easeljs-0.8.2.min.js"></script>
  <script>      
    var stage = new createjs.Stage("canvas");
    var circle = new createjs.Shape();

    function drawRectangle(){
      var rect = new createjs.Shape();
      rect.graphics.beginFill("#000").drawRect(10, 10, 80, 80);
      stage.addChild(rect);
      stage.update();
    }

    function drawShapes(){
      drawRectangle();
      stage.update();
    }

  </script>
 </head>
 <body onload="drawShapes()">
    <canvas id="canvas" width="500" height="300"></canvas>
    <button onclick="drawRectangle('#ff0000')">Click me for red</button>
 </body>
</html>

Answer 1

你的演示可能不起作用，因为你是在正文onload之前定义你的舞台，并传递你的画布的ID（它使用了幕后的document.getElementById）。 canvas元素在正文中创建之前将无法使用。

我建议将不在函数中的代码移动到init（），或者将其放入drawShapes方法。

var stage, circle; // Keep them global

function drawRectangle(){
  var rect = new createjs.Shape();
  rect.graphics.beginFill("#000").drawRect(10, 10, 80, 80);
  stage.addChild(rect);
  //stage.update(); // Unnecessary, since it is called in drawShapes.
}

function drawShapes(){
  stage = new createjs.Stage("canvas");
  circle = new createjs.Shape();
  drawRectangle();
  stage.update();
}

您还可以在canvas元素后面的body中定义脚本，以便在元素准备好后进行初始化。

请注意，您的小提琴中没有createjs库，并且JSFiddle会在onload事件期间触发小提琴的代码部分，因此您可能看不到本地存在的问题。

使用Easel JS的功能

1 个答案: