CreateJS不绘制

我使用createJS绘制我的HTML5画布。一切似乎都有效，但形状并未画出来。下面的代码：CreateJS不绘制

$(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>

一切都显示正常。控制台日志按预期记录。唯一缺少的是我画的线，我找不到原因。任何人都可以指出错误吗？

来源

2016-10-11 Yong Quan

它看起来像你没有更新你的舞台。在ticking方法添加更新的呼叫：

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

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

干杯。

来源

2016-10-11 15:40:47 Lanny

回答

相关问题