在 jcanvas 中第二次在动画层上发出问题

Question

我正在调用一个包含所有绘制方法的函数，然后我正在调用另一个包含所有动画方法的函数，问题是，

当我第一次调用第二个函数时，它工作得很好，但第二次动画时间不工作

<!DOCTYPE html>
<html>

<head>
    <title>mask image</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <style>
        @font-face {
            font-family: "Kimberleyy";
            src: url("RAINFALL.otf") format("truetype");
        }

        .fromdiv {
            padding: 5%;
            margin: 5%;
            border: 1px dashed #ccc;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jcanvas/16.7.3/jcanvas.js"></script>
</head>

<body style="background-color:#f0f0f0">
    <div class="row">
        <div class="col-md-5">
            <div class="form-group text-right">
                <button type="button" class="btn btn-primary" id="btnrestore">Restore</button>
                <button type="button" class="btn btn-primary" id="btnanimate">Animate</button>
            </div>
        </div>
        <div class="col-md-7">
            <div style="text-align:right">
                <canvas id="can" style=" background-color:#fff; margin:0px auto;" width="800" height="500"></canvas>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function () {
            //adi();
            //jio();
            $('#btnrestore').click(function () {
                adi();
            });
            $('#btnanimate').click(function () {
                jio();
            });
        });
    </script>
    <script>
        function ssd() {
            $('canvas').restoreCanvas();
        }
        c = document.getElementById("can");
        c.width = 895;
        c.height = 630;

        function adi() {
            $('canvas').drawImage({
                source: '5222470-fantastic-images.jpg'
                , x: c.width / 2
                , y: c.height / 2
                , width: 1195
                , height: 730
                , layer: true
                , name: 'bgimg'
            , }).drawVector({
                fillStyle: '#002051'
                , strokeWidth: 4
                , rounded: true
                , closed: true
                , x: 580
                , y: 450
                , a1: 90
                , l1: 500
                , a2: 180
                , l2: 200
                , a3: 270
                , l3: 710
                , a4: 20
                , l4: 215
                , layer: true
                , name: 'vct2'
            , }).drawText({
                fillStyle: '#fff'
                , x: c.width / 1.45
                , y: 550
                , fontSize: 48
                , lineHeight: 1.1
                , maxWidth: 440
                , fontFamily: 'Kimberleyy, sans-serif'
                , text: 'LOREMIPS UM DOLOR'
                , layer: true
                , name: 'txt1'
            });
        }

        function jio() {
            $('canvas').animateLayer('bgimg', {
                width: 1430
                , height: 953
            }, 4000,'swing');
        }
    </script>
</body>

</html>

Answer 1

肯定是jquery版本问题。试试旧版本的 jquery.

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

这里我用的是jquery 1.12.4，可以用，here

在 jcanvas 中第二次在动画层上发出问题

issue on animate layer in second time in jcanvas

javascript

jcanvas

html5-canvas