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',
            fillStyle: 'red',
            rounded: true,
            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
            cx5: 225, cy5: 62.5, // Control point
            cx6: 200, cy6: 75, // Control point
            x4: 150, y4: 75, // Start/end point
            cx7: 100, cy7: 75, // Control point
            cx8: 75, cy8: 62.5, // Control point
            x5: 50, y5: 50 // Start/end point
            
        });
        function ani() {
            $('canvas').animateLayer('mund', {
                cy1: 25, // Control point
                cy2: 0, // Control point
                y2: 0, // Start/end point
                cy3: 0, // Control point
                cy4: 25, // Control point
                cy5: 37.5,
                cy6: 25,
                y4: 25,
                cy7: 25,
                cy8: 37.5
            }, 2000, 'linear', function () {
                $('canvas').animateLayer('mund', {
                    cy1: 75, // Control point
                    cy2: 100, // Control point
                    y2: 100, // Start/end point
                    cy3: 100, // Control point
                    cy4: 75, // Control point
                    cy5: 62.5,
                    cy6: 75,
                    y4: 75,
                    cy7: 75,
                    cy8: 62.5
                }, 2000, 'linear', ani);
            });
        }
        ani();