Canvas 中的随机对象

Question

我创建了一个 canvas 并且我想每五秒添加一个随机对象（方形、圆形、矩形..）？

  <body>
    <canvas id="c" width=400" height="400"></canvas>
    <script type="text/javascript">


var canvas = new fabric.Canvas('c');
var rect = new fabric.Rect({
  left: 50,
  top: 50,
  fill: 'green',
  width: 40,
  height: 80
});
var circle = new fabric.Circle({
  radius: 20, 
  fill: 'red', 
  left: 100, 
  top: 100
});
canvas.add(rect);
canvas.add(circle);

    </script>

Answer 1

看看我的 fiddle 示例，我认为这就是您所需要的。

http://jsfiddle.net/tornado1979/w1bg4bdj/

代码是这样的：

 var canvas = new fabric.Canvas('c');
var myObjects = ['circle','square','rectangle','arc'];
var posX;
var posY;

setInterval(function () {

    var pointer = myObjects.length * Math.random();
     posX = canvas.width * Math.random();
     posY = canvas.height * Math.random();

    pointer = Math.round(pointer);

    switch (pointer){
        case 0:
            var circle = new fabric.Circle({
                  radius: 20, 
                  fill: 'red', 
                  left: posX, 
                  top: posY
                });
            canvas.add(circle);
            break;
        case 1:
             var obj = new fabric.Rect({
              left: posX, 
              top: posY,
              fill: 'green',
              width: 40,
              height: 80
            });
            canvas.add(obj);
            break;
        case 2:
            var square = new fabric.Rect({
              left: posX, 
              top: posY,
              fill: 'yellow',
              width: 50,
              height: 50
            });
            canvas.add(square);
            break;
        case 3:
              var arc = new fabric.Circle({
                  radius: 45, 
                  originX:'center',originY:'center',
                  angle: 0,startAngle: 180, endAngle: Math.PI,
                  fill: 'blue', 
                  left: posX, 
                  top: posY
                });
            canvas.add(arc);
            break;
    }
}, 
  1000);

Canvas 中的随机对象

Random Objects in Canvas

html

javascript

canvas

fabricjs