CreateJS не рисует

#jquery #html #canvas #createjs

#jquery #HTML #холст #createjs

Вопрос:

Я использую CreateJS для рисования моего холста HTML5. Кажется, все работает, но фигура не рисуется. Ниже приведен код:

 $(document).ready(function(){

  var canvas, stage, line;
  canvas = document.getElementById('weigh');
  stage = new createjs.Stage(canvas);

  function drawLine(){
    line = new createjs.Shape();
    line.graphics.moveTo(5, 10).setStrokeStyle(1).beginStroke('#ff0000').lineTo(300, 10);
    stage.addChild(line);
  }

  drawLine();

  createjs.Ticker.on('tick', ticking);
  createjs.Ticker.setFPS(60);

  function ticking(event){
    line.rotation  = 5;
    console.log('ticking');
  }

});
  

Вот html:

 <!DOCTYPE html>
<html>
<head>
  <title>Canvas</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jcanvas/16.7.3/jcanvas.min.js"></script>
  <script type="text/javascript" src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
  <link rel="stylesheet" href="weigh.css" type="text/css">
  <script type="text/javascript" src="test.js"></script>
</head>
<body>
    <div id="canvas">
        <canvas id="weigh" width="382" height="382">alternate content</canvas>
    </div>
</body>
</html>
  

Все отображается, как и ожидалось. Журнал консоли регистрируется, как и ожидалось. Единственное, чего не хватает, это линии, которую я рисую, и я не могу найти почему. Кто-нибудь может указать на ошибку?

Ответ №1:

Похоже, вы не обновляете свою сцену. Добавьте вызов обновления в свой ticking метод:

 function ticking(event){
  line.rotation  = 5;
  stage.update(event);
  console.log('ticking');
}
  

Обновление этапа перерисовывает содержимое этапа. Это не происходит автоматически и предоставляет вам возможность контролировать, когда содержимое перерисовывается, поскольку это может быть дорогостоящим вызовом.

Приветствия.