Question

我正在调用一个包含所有draw方法的函数，然后我用所有animate方法调用另一个函数，问题是，

当我第一次调用第二个函数时它完美运行但第二个动画时间不起作用

<!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

1 个答案: