Javascript jcanvas中第二次动画层的问题
我调用一个包含所有draw方法的函数,然后调用另一个包含所有animate方法的函数,问题是 当我第一次调用第二个函数时,它工作得很好,但第二个动画时间不工作Javascript jcanvas中第二次动画层的问题,javascript,html5-canvas,jcanvas,Javascript,Html5 Canvas,Jcanvas,我调用一个包含所有draw方法的函数,然后调用另一个包含所有animate方法的函数,问题是 当我第一次调用第二个函数时,它工作得很好,但第二个动画时间不工作 <!DOCTYPE html> <html> <head> <title>mask image</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3
<!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>
遮罩图像
@字体{
字体系列:“金伯利”;
src:url(“rainment.otf”)格式(“truetype”);
}
fromdiv先生{
填充:5%;
利润率:5%;
边框:1px虚线#ccc;
}
恢复
使有生气
$(文档).ready(函数(){
//adi();
//jio();
$('#btnrestore')。单击(函数(){
adi();
});
$('#btnanimate')。单击(函数(){
jio();
});
});
函数ssd(){
$('canvas')。restoreCanvas();
}
c=document.getElementById(“can”);
c、 宽度=895;
c、 高度=630;
函数adi(){
$('canvas').drawImage({
资料来源:“5222470张精彩图片。jpg”
,x:c.宽度/2
,y:c.高度/2
,阔:1195
,身高:730
,图层:true
,名称:'bgimg'
,}).drawVector({
填充样式:“#002051”
,冲程宽度:4
,四舍五入:对
,关闭:正确
,x:580
,y:450
,a1:90
,l1:500
,a2:180
,l2:200
,a3:270
,l3:710
,a4:20
,l4:215
,图层:true
,名称:'vct2'
,})绘图文本({
填充样式:“#fff”
,x:c.宽度/1.45
,y:550
,尺码:48
,线宽:1.1
,最大宽度:440
fontFamily:“金伯利,无衬线”
,文字:“LOREMIPS UM DOLOR”
,图层:true
,名称:'txt1'
});
}
函数jio(){
$('canvas').animateLayer('bgimg'{
宽度:1430
,身高:953
},4000,'swing');
}
这一定是jquery版本的问题。尝试较旧版本的jquery
在这里,我使用jquery 1.12.4,它可以正常工作,这一定是jquery版本的问题。尝试较旧版本的jquery
这里我使用jquery 1.12.4,它可以工作