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

回答

相關問題