JavaScript Canvas を使用してランダムなインターネット トラフィック アニメーションを作成する

JavaScript Canvas を使用したランダムなインターネット トラフィック アニメーションの実装

純粋な JavaScript を使用してランダムな振幅でキャンバス ラインをアニメーション化するフロントエンド アプローチ

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
let xOffset = 0;
const speed = 2;
function getRandomAmplitude() {
    return Math.random() * 100;  // Generates random amplitude for each line
}
function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    ctx.moveTo(0, canvas.height / 2);
    for (let x = 0; x < canvas.width; x++) {
        let amplitude = getRandomAmplitude();
        let y = canvas.height / 2 + Math.sin((x + xOffset) * 0.02) * amplitude;
        ctx.lineTo(x, y);
    }
    ctx.strokeStyle = '#000';
    ctx.lineWidth = 2;
    ctx.stroke();
    xOffset += speed;
    requestAnimationFrame(animate);
}
animate();

サーバーサイドアニメーションを生成するためのバックエンド代替手段

サーバー側でアニメーションをレンダリングする Canvas モジュールを備えた Node.js

const { createCanvas } = require('canvas');
const fs = require('fs');
const canvas = createCanvas(800, 400);
const ctx = canvas.getContext('2d');
let xOffset = 0;
function getRandomAmplitude() {
    return Math.random() * 100;
}
function generateFrame() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    ctx.moveTo(0, canvas.height / 2);
    for (let x = 0; x < canvas.width; x++) {
        let amplitude = getRandomAmplitude();
        let y = canvas.height / 2 + Math.sin((x + xOffset) * 0.02) * amplitude;
        ctx.lineTo(x, y);
    }
    ctx.strokeStyle = '#000';
    ctx.lineWidth = 2;
    ctx.stroke();
    xOffset += 2;
}
setInterval(() => {
    generateFrame();
    const buffer = canvas.toBuffer('image/png');
    fs.writeFileSync('./frame.png', buffer);
}, 100);

フロントエンド JavaScript アニメーションのテスト

Jest を使用したブラウザベースのキャンバス アニメーションの単体テスト

describe('Canvas Animation', () => {
    test('should create a canvas element', () => {
        document.body.innerHTML = '<canvas id="myCanvas" width="800" height="400"></canvas>';
        const canvas = document.getElementById('myCanvas');
        expect(canvas).toBeTruthy();
    });
    test('should call getRandomAmplitude during animation', () => {
        const spy = jest.spyOn(global, 'getRandomAmplitude');
        animate();
        expect(spy).toHaveBeenCalled();
    });
});

バックエンド Node.js キャンバス レンダリングのテスト

Mocha と Chai を使用した Node.js キャンバス生成の単体テスト

const chai = require('chai');
const fs = require('fs');
const { createCanvas } = require('canvas');
const expect = chai.expect;
describe('Server-side Canvas Animation', () => {
    it('should create a PNG file', (done) => {
        const canvas = createCanvas(800, 400);
        const ctx = canvas.getContext('2d');
        generateFrame(ctx, canvas);
        const buffer = canvas.toBuffer('image/png');
        fs.writeFileSync('./testFrame.png', buffer);
        expect(fs.existsSync('./testFrame.png')).to.be.true;
        done();
    });
});

JavaScript キャンバス アニメーションに関するよくある質問

1. キャンバス アニメーションの速度を制御するにはどうすればよいですか?
2. の値を増減することで速度を調整できます。 speed 変数。どれくらいの速度を制御するか xOffset アニメーション中に変化します。
3. キャンバス アニメーションでパーリン ノイズなどのノイズ アルゴリズムを使用できますか?
4. はい、パーリン ノイズは、を使用する代わりに、より滑らかなランダム パターンを生成することで組み込むことができます。 Math.random() 振幅に関しては。これにより、より自然で流れるようなアニメーションを作成できます。
5. 大規模なアニメーションのキャンバスのパフォーマンスを最適化するにはどうすればよいですか?
6. オフスクリーン キャンバス、フレーム レートの低減、再描画が必要な領域の制限などの手法を使用して、パフォーマンスを最適化できます。 clearRect() CPU 使用率を最小限に抑えるため。
7. 同じキャンバス上に複数のアニメーション線を描画できますか?
8. はい、複数追加することで ctx.moveTo() そして ctx.lineTo() 同じ内のコマンド animate() 機能を使用すると、異なる軌道で複数の線を描くことができます。
9. アニメーションを画像として保存するにはどうすればよいですか?
10. 使用する canvas.toDataURL()では、アニメーションの現在のフレームを画像として保存できます。このコマンドを使用すると、キャンバスを PNG またはその他の画像形式としてエクスポートできます。

リアルタイム キャンバス アニメーションに関する最終的な考え

インターネット トラフィックを模倣する動的なキャンバス アニメーションを作成するには、数学関数とランダム化を組み合わせる必要があります。ご紹介 ランダム 値を振幅に組み込むことで、アニメーションが予測不可能で魅力的なままとなり、変動する交通パターンをリアルタイムでシミュレートします。

滑らかさを実現するには、 requestAnimationFrame() 重要です。アニメーションをブラウザのリフレッシュ レートと同期させ、滑らかな視覚体験を提供します。適切に最適化すると、エンドレス アニメーションは Web ビジュアライゼーションやその他のリアルタイム データ表示のための強力なツールになります。