JavaScript/Fabricjs

Wiki-Quelltext dieser Seite.

<language>Javascript</language>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.3.1/fabric.min.js" crossorigin="anonymous"></script>
</html>

<canvas width="600" height="500" style="width: 600px; height: 500px;"></canvas>

<run id="6043d3d2308e7">
(function() {
  var canvas = new fabric.StaticCanvas('canvas1');

  canvas.add(
    new fabric.Rect({ top: 100, left: 100, width: 50, height: 50, fill: '#f55' }),
    new fabric.Circle({ top: 140, left: 230, radius: 75, fill: 'green' }),
    new fabric.Triangle({ top: 300, left: 210, width: 100, height: 100, fill: 'blue' })
  );

  function animate() {
    canvas.item(0).animate('top', canvas.item(0).get('top') === 500 ? '100' : '500', {
      duration: 1000,
      onChange: canvas.renderAll.bind(canvas),
      onComplete: animate
    });
  }
  animate();
})();
</run>