Kombinationen

by Ulrich Bangert

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jcanvas/20.1.4/jcanvas.js"></script>
   <canvas width="300" height="150"></canvas>

JavaScript

$('canvas').drawBezier({
  name: 'mund',
  layer: true,
  strokeStyle: '#000',
  strokeWidth: 5,
  x1: 50, y1: 50, // Start point
  cx1: 75, cy1: 75, // Control point
  cx2: 100, cy2: 100, // Control point
  x2: 150, y2: 100, // Start/end point
  cx3: 200, cy3: 100, // Control point
  cx4: 225, cy4: 75, // Control point
  x3: 250, y3: 50 // Start/end point
}).animateLayer('mund', {
  cy1: 50, // Control point
  cy2: 50, // Control point
  y2: 50, // Start/end point
  cy3: 50, // Control point
  cy4: 50, // Control point
  }, 2000, 'linear'
);