Question

这里我试图创建五个动态矩形，它将随机定位在canvas.i上创建一个for循环来创建画布。但是只有一个矩形在画布上出现，更不用说五个了。为什么其余的四个画布上没有出现矩形。这里的问题是什么以及如何解决？

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

Answer 1

Math.Random()确实会生成0到1之间的数字。因此，floor调用时，您的大多数数字将为200而y为20。有时它对于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();
    }
}

这将为x生成0到200之间的数字，为y生成0到20之间的数字。

使用easeljs在画布的不同位置动态创建五个矩形

1 个答案: