1

半円が描かれているこのアニメーションがあり、基本的にそれをコピーし、コピーを60px下に移動してから、新しいものに1秒の遅延を追加して、「B」を描画します

html

<canvas id="thecanvas"></canvas>

脚本

var can = document.getElementById('thecanvas');
ctx = can.getContext('2d');
can.width = window.innerWidth;
can.height = window.innerHeight;

window.drawCircle = function (x, y) {
    segments = 90, /* how many segments will be drawn in the space */
    currentSegment = 0,
    toRadians = function (deg) {
        return (Math.PI / 180) * deg;
    },
    getTick = function (num) {
        var tick = toRadians(180) / segments; /*360=full, 180=semi, 90=quarter... */
        return tick * num;
    },
    segment = function (end) {
        end = end || getTick(currentSegment);
        ctx.clearRect(0, 0, can.width, can.height);
        ctx.beginPath();
        ctx.arc(x, y, 60, (1.5 * Math.PI), end + (1.5 * Math.PI), false);
        ctx.stroke();
        ctx.closePath();
    };

    ctx.lineWidth = 5;
    ctx.strokeStyle = 'rgba(0,0,0,0.5)';

    setTimeout(function render() {
        segment(getTick(currentSegment));
        currentSegment += 1;
        if (currentSegment < segments) {
            setTimeout(render, 5);
        } else {
            currentTick = 0;
        }
    }, 250);
};
drawCircle(100, 100);

ここにフィドルがありますhttp://jsfiddle.net/zhirkovski/bJqdN/

4

1 に答える 1

0

setTimeoutまず、関数をメソッドの外に置くことができますdrawCircle。

次に、少なくとも 2 つのオプションがあります。

  1. 1 回の描画の終了時にディスパッチされる「endDraw」イベントを作成します。このイベントが処理されたら、drawCircle メソッドを再度呼び出すだけです。もちろん、これを実現するには、最初の drawCircle を呼び出すメイン メソッドが必要です。

  2. より良いソリューションを作成するために、通話のワークフローを記述することができます。つまり、呼び出すメソッドのリストと、それぞれの開始フレームを記述します。

    var workflow = [{method:"drawCircle", frame:0, x:100, y:100},      //the first half circle at the frame 0, x=100, y=100
                {method:"drawCircle", frame:1000, x:100, y:190}];  //the second half circle starting at frame 1000, x=100, y=190

    メインタイマーは、この配列を使用して何を呼び出すかを知るように構成されます

于 2013-02-27T13:35:25.780 に答える