文章/答案/技术大牛

发布

问CreateJS不画
EN

Stack Overflow用户

提问于 2016-10-11 05:46:54

回答 1查看 64关注 0票数 0

我正在使用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>

一切都如期而至。控制台日志正在按预期进行日志记录。唯一遗漏的是我画的线，但我找不到原因。有人能指出错误吗？

jquery

html

canvas

createjs

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-10-11 15:40:47

看上去你没在更新舞台。在ticking方法中添加一个更新调用：

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

阶段更新将重新绘制阶段内容。这不是自动发生的，它为您提供了控制内容何时被重新绘制的机会，因为这可能是一个昂贵的调用。

干杯。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/39971135

复制

相似问题

问CreateJS不画
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CreateJS不画EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CreateJS不画
EN