Kombinationen

by Ulrich Bangert

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jcanvas/20.1.4/jcanvas.js"></script>
    <canvas id="mycanvas" width="400" height="600"></canvas>
    <canvas id="mund" width="300" height="200"></canvas>

CSS

body {
            position: relative;
        }
        #mund {
            position: absolute;
            left: 50px;
            top: 380px;
        }

JavaScript

var cv = $("#mycanvas");
        for (var i = 0, x = 65, y1 = 10, y2 = 350; i < 10; i++, x += 30) {
            cv.drawLine({
                layer: true,
                name: 'haare' + i,
                strokeStyle: 'black',
                strokeWidth: 4,
                x1: x, y1: y1, x2: x, y2: y2
            });
            anihaare(i);
        }
        function anihaare(i) {
            console.log("anihaare");
            cv.animateLayer(
                'haare' + i, {
                    y1: 150
                }, {
                    duration: 1000,
                    complete: function () {
                        cv.animateLayer(
                            'haare' + i, {
                                y1: 10
                            }, {
                                duration: 1000,
                                complete: function () {
                                    anihaare(i);
                                }
                            });
                    }
                })
        }
        anihaare();
        cv.drawEllipse({
            layer: true,
            fillStyle: 'white',
            strokeStyle: 'black',
            strokeWidth: 4,
            x: 200, y: 350,
            width: 300, height: 350
        });
        var cvmund = $("#mund");
        cvmund.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
         ...