如何为网页上的文本绘制动画？ [英] How can I animate the drawing of text on a web page?

问题描述

我想要一个网页有一个居中的词。

我想用动画绘制这个单词，以便页面以与我们相同的方式写入单词，即它从一个点开始，随着时间绘制线和曲线，使得最终结果是字形。

我不在乎这是否与< canvas> 或DOM完成，关心它是否使用JavaScript或CSS。缺少jQuery将是很好的，但不是必需的。

我该怎么做？

解决方案

我想要这个词用动画绘制，使得页面
以与我们相同的方式写入该词

< h2> Canvas版本

这将绘制单个字符，更像手写。它使用长划线模式，其中开/关顺序随时间每个字符交换。它还有一个速度参数。

< br>
^{示例动画（见下面的演示）}

我添加了随机字母间距，y delta偏移，透明度，非常微妙的旋转，最终使用已经手写的字体。这些可以作为动态参数包装，以提供范围广泛的书写风格。

为了更逼真的看，路径数据将是必需的， t默认值。

工作原理

$ b这是一个简单而有效的程式码，接近手写行为， $ b

通过定义一个破折号模式，我们可以创建行军蚂蚁，虚线等。利用这一点，通过为关闭点定义一个很长的点并逐渐增加打开点，当在对点长度进行动画处理时，在描边时将给出绘制线条的错觉。

由于关闭点太长，重复的图案将不可见（长度将随所使用的字体的大小和特性而变化）。字母的路径将有一个长度，因此我们需要确保每个点至少覆盖此长度。

对于由多个路径组成的字母（f.ex. O，R，P等）作为一个用于轮廓，一个用于中空部分，线将显示为同时绘制。我们不能用这种技术做很多事情，因为它需要访问每个路径段被单独划分。

兼容性

对于不支持canvas元素的浏览器，可以在标签之间放置显示文本的替代方法，例如，样式文本：

 < canvas ...> 
< div class =txtStyle> STROKE-ON CANVAS< / div> 
< / canvas> 
  

演示

stroke-on（无依赖性） -

  var ctx = document.querySelector（canvas）。getContext（2d），dashLen = 220，dashOffset = dashLen，speed = 5，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]）; //创建一个长破折号dashOffset  -  = speed; //减少破折号长度ctx.strokeText（txt [i]，x，90）; //笔画字母if（dashOffset> 0）requestAnimationFrame ）; // animate else {ctx.fillText（txt [i]，x，90）; //填写最后一个字母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（））; //随机y-delta ctx.rotate（Math.random（）* 0.005 ）; //随机旋转if（i  

  canvas {background：url（http://i.imgur.com/5RIXWIE.png）}  

pre class =snippet-code-html lang-html prettyprint-override> < canvas width = 630>< / canvas>

/ div>

I want to have a web page which has one centered word.

I want this word to be drawn with an animation, such that the page "writes" the word out the same way that we would, i.e. it starts at one point and draws lines and curves over time such that the end result is a glyph.

I do not care if this is done with <canvas> or the DOM, and I don't care whether it's done with JavaScript or CSS. The absence of jQuery would be nice, but not required.

How can I do this? I've searched exhaustively with no luck.

解决方案

I want this word to be drawn with an animation, such that the page "writes" the word out the same way that we would

Canvas version

This will draw single chars more like one would write by hand. It uses a long dash-pattern where the on/off order is swapped over time per char. It also has a speed parameter.

^{Example animation (see demo below)}

To increase realism and the organic feel, I added random letter-spacing, an y delta offset, transparency, a very subtle rotation and finally using an already "handwritten" font. These can be wrapped up as dynamic parameters to provide a broad range of "writing styles".

For a even more realistic look the path data would be required which it isn't by default. But this is a short and efficient piece of code which approximates hand-written behavior, and easy to implement.

How it works

By defining a dash pattern we can create marching ants, dotted lines and so forth. Taking advantage of this by defining a very long dot for the "off" dot and gradually increase the "on" dot, it will give the illusion of drawing the line on when stroked while animating the dot length.

Since the off dot is so long the repeating pattern won't be visible (the length will vary with the size and characteristics of the typeface being used). The path of the letter will have a length so we need to make sure we are having each dot at least covering this length.

For letters that consists of more than one path (f.ex. O, R, P etc.) as one is for the outline, one is for the hollow part, the lines will appear to be drawn simultaneously. We can't do much about that with this technique as it would require access to each path segment to be stroked separately.

Compatibility

For browsers that don't support the canvas element an alternative way to show the text can be placed between the tags, for example a styled text:

<canvas ...>
    <div class="txtStyle">STROKE-ON CANVAS</div>
</canvas>

Demo

This produces the live animated stroke-on (no dependencies) -

var ctx = document.querySelector("canvas").getContext("2d"),
    dashLen = 220, dashOffset = dashLen, speed = 5,
    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);
  }
})();

canvas {background:url(http://i.imgur.com/5RIXWIE.png)}

<canvas width=630></canvas>

这篇关于如何为网页上的文本绘制动画？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！