问题jcanvas在第二次动画层上

问题描述：

我呼吁包含所有绘制的方法，然后我打电话与所有动画的方法和发行其他功能的功能是，问题jcanvas在第二次动画层上

当我打电话第二个功能第一次它工作完美，但第二动画时间不起作用

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

答

它必须是jQuery版本问题。尝试旧版本的jQuery。

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

这里使用jQuery 1.12.4，和它的作品，here

问题jcanvas在第二次动画层上

相关推荐