壁紙エンジン、オーディオビジュアライザのレンダリングのカスタマイズに関する洞察

WWW:

私の最後のポスト以来、私は私の前の問題の多くを修正私のWallpaper--にいくつかの前進を作りました

誰もがそれを持っている場合、私はいくつかの方向が欲しいのに今日:

私が働いていることを最後のウィジェットは、オーディオビジュアライザです。一意性を望む私の追求は(...あなたは本当にこの属性のないプログラマになることができますか?)しかし、その問題がないわけではありません。ここで私は、私はAfter Effectsで数週間前に作られたビジュアライザをモデル化していますことを言及です。https://youtu.be/cHweVjmBmP4

Javascriptと壁紙エンジンの「制限」で、私は私の出力でこれらの鋭利物曲がり、カーブを複製することができ、とにかくありますか?私が最初にarcTo()メソッドを使用する変数はここに役立つだろうと信じてい..しかし、それは座標が私の接線のために使用されるものを私には不明です。そして、何式が影響を受けたデータを説明するのに役立つでしょう。

ここでは、そのままコードです。おかげでマイケルのFedora、このようなアクセスコードを書くため。私は自分で物事をテストすることによって、より読みからそんなにアルゴリズムについて学びました。私は、このアウトを理解しようとしておこうが、任意の助けを延々と歓迎です!

    let i, x = 0, y = center + scale*data[0]*0.33;   
    ctx.beginPath();
    ctx.moveTo(x, y);
    for(i = 0; i < 63; i++) {
        x += width;
        y = center + scale * data[i];
        ctx.lineTo(x, y);
    }

    x += width;
    y = center + scale * (data[63] + data[127]) * 0.5;
    ctx.lineTo(x, y);
    x += width;
    y = center + scale * data[126];
    ctx.lineTo(x, y);

    x = 128*width, y = center + scale*data[64]*0.33;
    ctx.moveTo(x, y);
    for(i = 64;i < 127; i++) {
        x -= width;
        y = center + scale * data[i];
        ctx.lineTo(x, y);




    }
}

function renderLine(ctx, color) {
    ctx.lineWidth = 1;
    ctx.strokeStyle = color;
    if(glob.bloom) {
        ctx.shadowBlur = glob.bloomRadius;
        ctx.shadowColor = color;
    }
    ctx.stroke();
}
AKX:

私はあなたのAEの例では曲線が表示されていないが、(角度は丸い角を得るようにする)との長いポリラインはラウンドにスタイルセットに参加します。

私は特に、壁紙エンジンについて知っているが、のように見えることはありませんあなたが行うことが可能な通常のキャンバスのもの、

ctx.lineJoin = "round";

リンクMDNページの例では、私が今までにできるよりもスタイルに参加する説明でもっと良いです。

おすすめ

転載: http://43.154.161.224:23101/article/api/json?id=30973&siteId=1