个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在调用一个包含所有绘制方法的函数，然后我正在调用另一个包含所有动画方法的函数，问题是，
当我第一次调用第二个函数时，它工作正常，但第二个动画时间不起作用
<!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/
25
4
0
将文本输入的值输出到 jCanvas 的有效代码是什么？例如: 姓名[John Doe] 然后 John Doe 将被输出到 jCanvas 上。 我想我知道什么可行，但我不确定如何将其变成有效的 j
我正在使用 jcanvas，我需要按宽度和高度调整文本大小。实际上，该库提供了按 X 和 Y 缩放的选项，但我需要对宽度和高度属性执行相同的操作。 可能吗？ 最佳答案 在 jCanvas 中调整文本大
我正在调用一个包含所有绘制方法的函数，然后我正在调用另一个包含所有动画方法的函数，问题是， 当我第一次调用第二个函数时，它工作正常，但第二个动画时间不起作用 mask image
每次单击矩形时，我都会尝试增加文本值。我究竟做错了什么 ？我不明白，因为对我的 var 的调用在 drawText 中有效，但在 setLayer 中无效。我查看了“setLayer”源代码，它使用“
我用这个http://projects.calebevans.me/jcanvas/我有一个简单的例子 和js var canvas = document.getElementById
我有一个像素图对象，每一行包含一个列对象，其中包含颜色信息。然后我使用 switch() 选择颜色，然后简单地将它绘制到 Canvas 上。这是代码: for(var pixX in pixmap
我如何将 globalCompositeOperation(或任何其他可以给我“multiply”颜色操作的插件)集成到 jCanvas 中jQuery 插件？ // How do I get thi
我创建了不同的图层，例如屋顶、网格和设置的各种面板。 我想从左下角开始 y 坐标。是否有一个现有的函数可以解决这个问题，或者是否有一个优雅的解决方案来解决这个问题？ 最佳答案 您可以使用 decora
我正在使用 JCanvas 创建一个简单的 Java 应用程序，我需要获取用户按下的按键的按键代码:以下是 Java 代码的简化版本 import java.awt.*; import jav
我不知道如何获取 jCanvas 中拱门的当前旋转 Angular 。 layer.rotate 似乎只为我提供旋转的原始设置，当我真的想在它达到某个 Angular 时更改其行为时。 我有一个exa
我正在使用JCanvas用于绘制一些弧线。但我无法为弧定义标签。请建议如何在 Jcanvas 中定义 arc 的标签。 这是我的弧代码。 $('canvas').drawArc({ strokeS
我想测试这个例子:http://calebevans.me/projects/jcanvas/sandbox.php#%24%28%22canvas%22%29.drawImage%28%7B%0A%
在netbeans中，可以将 Canvas 添加到您的应用程序中，但是似乎不可能在 Canvas 上绘图，因为您需要重载paint(Graphics)方法。做这个的最好方式是什么？谢谢! 最佳答案 您
我使用 jCanvas 用 jQuery 制作传单编辑器:https://projects.calebevans.me/jcanvas/ $(function () { initCanvas();
只是想说，我不使用 CSS，但是在小尺寸 Canvas 上圆圈的质量很差。 示例:jcanvas https://jsfiddle.net/tkdn2rv6/25/ 例如，konvajs 上一切正常:
我正在创建一种编辑器，当用户在文本区域中输入文本并单击“添加文本”时，他/她的文本将添加到 Canvas 中。因此，我需要一个选项，如果用户想要在该特定文本下划线，他也可以这样做。这里我添加了“下划线
我正在使用jCanvas构建一个HTML5应用程序，我需要移除一个图层，它是 Canvas 上的一个黑色圆圈，你可以看到代码here . var cvLingualWidth = 945; var c
我是一名优秀的程序员,十分优秀！