我正在调用一个包含所有绘制方法的函数，然后我正在调用另一个包含所有动画方法的函数，问题是，
当我第一次调用第二个函数时，它工作正常，但第二个动画时间不起作用
<!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
关于javascript - jcanvas 中第二次出现动画层问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44580726/