我是网络开发人员中的新手。在定义事件之后,我想在JavaScript上设置文本动画。找到了使线图动画的示例,但该方法不适用于圆弧(how to animate drawing lines on canvas示例:http://jsfiddle.net/m1erickson/7faRQ/。滚动浏览并找到一种方式(http://jsfiddle.net/loktar/uhVj6/4/),但只能达到十几个字母。经过多行动画处理后,不准确度逐步上升,但是动画处理缩短了,我找不到控制这些因素的解决方案。假设字母“ P”为:
var l = 10 //factor of scale
function line010(current) {
context.beginPath();
context.moveTo(x-5*l, y-3/2*l);
context.lineTo(x-5*l, y-3/2*l-4*l*current);
context.stroke();
curPerc++;
if (curPerc < endPerc) {
requestAnimationFrame(function () {
line010(curPerc / 100)
});
}
}
function line011(current) {
context.beginPath();
context.moveTo(x-5*l, y-11/2*l);
context.lineTo(x-5*l+3/2*l*current, y-11/2*l);
context.stroke();
curPerc++;
if (curPerc < endPerc) {
requestAnimationFrame(function () {
line011(curPerc / 100)
});
}
}
function arc012(current) {
context.beginPath();
context.arc(x-7/2*l, y-9/2*l, l, -1/2*Math.PI, Math.PI*current-1/2*Math.PI);
context.stroke();
curPerc++;
if (curPerc < endPerc) {
requestAnimationFrame(function () {
arc012(curPerc / 100)
});
}
}
function line013(current) {
context.beginPath();
context.moveTo(x-7/2*l, y-7/2*l);
context.lineTo(x-7/2*l-l*current, y-7/2*l);
context.stroke();
curPerc++;
if (curPerc < endPerc) {
requestAnimationFrame(function () {
line013(curPerc / 100)
});
}
}
指出任何错误或其他更方便的方法来创建一组统一的字母,并在函数调用中为文本添加动画效果?我可以在其中插入文本并编译函数的地方,例如。
function draw("insertText")
{
A();
B();
C();
-
-
-
!();
&();
-
-
-
}(1000);
onload.draw(Thanks for your help!);
在画布上显示动画“谢谢您的帮助!”
编辑:在以下图片中可以看到视觉输出(单字母/四行与十字母/五十行):
实际上,这里有一个解决方案:How can I animate the drawing of text on a web page?提供了一种好的方法。但是更多地用于创建符号和为几何轨迹设置动画。
http://jsfiddle.net/8hwzqnrc/9/
<canvas width=630>
<div class="txtStyle">STROKE-ON CANVAS</div>
</canvas>
<script>
var ctx = document.querySelector("canvas").getContext("2d")
dashLen = 220, dashOffset = dashLen, speed = 10,
txt = "STROKE-ON CANVAS", x = 30, i = 0;
ctx.font = "50px Comic Sans MS, cursive, TSCu_Comic, sans-serif";
ctx.lineWidth = 5; ctx.lineJoin = "round"; ctx.globalAlpha = 2/3;
ctx.strokeStyle = ctx.fillStyle = "#1f2f90";
(function loop() {
ctx.clearRect(x, 0, 60, 150);
ctx.setLineDash([dashLen - dashOffset, dashOffset - speed]); // create a long dash mask
dashOffset -= speed; // reduce dash length
ctx.strokeText(txt[i], x, 90); // stroke letter
if (dashOffset > 0) requestAnimationFrame(loop); // animate
else {
ctx.fillText(txt[i], x, 90); // fill final letter
dashOffset = dashLen; // prep next char
x += ctx.measureText(txt[i++]).width + ctx.lineWidth * Math.random();
ctx.setTransform(1, 0, 0, 1, 0, 3 * Math.random()); // random y-delta
ctx.rotate(Math.random() * 0.005); // random rotation
if (i < txt.length) requestAnimationFrame(loop);
}
})();
</script>