1

html5キャンバスを使って「ライブタイプ」のようなものを作ろうとしていますが、うまくいきません。私もそれについてネット上で何も見つけることができません。それで、html5だけでそれを行うことはできませんか？誰かがモデルのあるサイトを知っていれば、それで十分です。

だから私は、ユーザーがそれを読んでいるときに、文字ごとにいくつかの単語をライブで書きたいと思っています。

ありがとう！

（私は自分のコードを投稿しませんでした。なぜなら、私はそれが無関係であることを望んでいるものから遠く離れているからです:)

4

1 に答える 1

2

これは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();
于 2012-08-19T19:36:27.803 に答える