在畫布的不同位置動態創建五個矩形使用easeljs

這裏我想創建五個動態矩形，它將隨機定位在canvas.i中創建一個for循環來創建canvas.but只有一個矩形正在繪製畫布更不用說了，因爲四個矩形的其餘部分沒有出現在畫布上。這裏的問題是什麼以及它如何被修復？在畫布的不同位置動態創建五個矩形使用easeljs

jsFiddle

<html> 
<head> 
    <style> 
    *{margin:0px;padding:0px;} 
    </style> 
<script src="easeljs.js"></script> 
</head> 
<body> 
    <canvas id="mycanvas" style="border:1px solid black;"></canvas> 
<script> 
    function init(){ 

    var canvas = document.getElementById('mycanvas'); 
    canvas.width = 500; 
    canvas.height = 550; 

    var stage = new createjs.Stage(canvas); 
    for (i=0;i<5;i++){ 
    var shape=new createjs.Shape(); 

    shape.graphics.beginFill('red').drawRect(stage.canvas.width-Math.floor(Math.random()+200),Math.floor(Math.random())+20,30,30); 
    stage.addChild(shape); 
    stage.update(); 


} 

} 
window.onload=init; 
</script> 
</body> 
</html>

來源

2014-06-09 AL-zami

Math.Random()不會產生0和1之間的數字。所以大部分的數字將是200 x和20，因爲floor通話年。有時候x會爲201，y爲21，但在屏幕上很難看到。我想你可能想要做的是以下幾點：

function init(){ 

    var canvas = document.getElementById('mycanvas'); 
    canvas.width = 500; 
    canvas.height = 550; 

    var stage = new createjs.Stage(canvas); 
    for (i=0;i<5;i++){ 
     var shape=new createjs.Shape(); 
     shape.graphics.beginFill('red').drawRect(stage.canvas.width-Math.floor(Math.random()*200),Math.floor(Math.random()*20),30,30); 
     stage.addChild(shape); 
     stage.update(); 
    } 
}

這會產生0和200之間的數字x和y的0到20之間。

來源

2014-06-09 16:05:45

非常感謝.. :) –

在畫布的不同位置動態創建五個矩形使用easeljs

回答

相關問題