javascript - html5画布中的实时类型

Question

我尝试使用 html5 画布制作类似“实时类型”的东西，但我无法得到它。我也无法在网上找到任何关于它的信息。那么，不能只用 html5 做到这一点吗？如果有人知道一个带有模型的站点，那就足够了。

因此，我想在用户阅读时逐字逐句地写一些单词。

谢谢！

（我没有发布我的代码，因为我离我想要的太远了，这无关紧要:)

Answer 1

这可以用canvas一点 JavaScript 来完成。我已经整理了一个演示，它应该展示原理并为您提供工作的起点。

如需进一步阅读，请查看文档setTimeout（在演示中用于创建绘制角色的动画循环）和方法（这里canvas.fillText有一个不错的教程）。

    var c = document.getElementById('myCanvas');

    var ctx = c.getContext('2d');
    ctx.fillStyle = "black";
    ctx.font = "30px sans-serif";

    var words = "Hello world!";
    var count = 0;
    var pause = 500; // ms to wait before drawing next character

    var chars;

    function draw() {

        count ++;

        // Grab all the characters up to count
        chars = words.substr(0, count);

        // Clear the canvas each time draw is called
        ctx.clearRect(0, 0, c.width, c.height);

        // Draw the characters to the canvas
        ctx.fillText(chars, 0, 150);

        if (count < words.length)
            setTimeout(draw, pause);
    }

    draw();