Canvas描画の浮遊ボールエフェクトの例

最近、ブロックチェーン情報に注目していて、ぶらぶらしていると、このウェブサイトのホームページの効果を偶然目にしました。それは、ボールが近づくと、それに接続されるセンシングラインがあります。マウスはボールで感知ラインを作成することもできます。 以下はキャンバスを使用して作成されています。

オリジナルエフェクト

効果を達成する

私はこれまで svg に何度も触れてきましたし、canvas でも非常に強力なレンダリング効果を実現できることは知っていましたが、これまで使い始めるきっかけとなった使用シナリオがなかったので、今回は自分で試してみようと思います。 。

また、私がこれに興味を持った理由は、視覚効果が好きだから、もう 1 つはゲームエンジンのように物理世界をシミュレートする感覚が好きだからです。ボール同士が衝突することを想像してみてください。 、または相互に重力反発を持たせるか、重力係数を増加させるか、このアニメーションは多くの想像力を広げることもできます。

こちらの github リポジトリを参照してください。

Canvas の描画命令は SVG の命令と非常に似ており、非常にシンプルです。

ctx.beginPath();ctx.arc(this.center.x, this.center.y, this.radius, 0, 2 * Math.PI);ctx.fill();

beginPath はパスを開始し、arc は円を描き、それを色で塗りつぶします。

ctx.beginPath();ctx.moveTo(from.x, from.y);ctx.lineTo(to.x, to.y);ctx.ストローク();

同様に、beginPath はパスを開始し、moveTo はブラシを始点に移動し、lineTo は終点まで線を描画し、ストロークをストロークします。

キャンバスを全画面に保つには、ウィンドウの読み込み時またはサイズ変更時にキャンバスの幅と高さをリセットするだけです。

 var Canvas = document.getElementById(canvas); function raiseCanvas() { Canvas.width = window.innerWidth; Canvas.height = window.innerHeight;} window.onload = window.onresize = ResizeCanvas;

基本的なアニメーションから始めましょう。

アニメーションを作成する 4 つのステップ:

1. キャンバスのコンテンツをクリアします。通常は、clearRect() を使用します。
2. キャンバスの状態を保存する
3. 描画コンテンツ
4. キャンバスの状態をリセット

私がやったことは比較的単純で、1 と 3 を使用するだけです。つまり、キャンバスを常にクリアしてから再描画します。

 window.onload = function () {sizeCanvas(); window.requestAnimationFrame(draw);};function cleanCanvas() { ctx.clearRect(0, 0, Canvas.width, Canvas.height);}functiondraw() { cleanCanvas (); // 描画要素。 window.requestAnimationFrame(draw);}

次の 3 つが利用可能です。

1. window.setInterval() ユーザー操作がまったく必要なく、継続的に再描画するだけの場合は、これで十分です。
2. window.setTimeout() キーボードやマウスなどのユーザー操作をアニメーションに反映させたい場合は、これを使用できます (わかりません。requestAnimationFrame の方が良いのではないでしょうか?)。
3. window.requestAnimationFrame() は、次回再描画する前に何をすべきかをブラウザーに指示します。つまり、独自にカスタマイズされた描画操作です。

MDN のこの例は非常にクールです。CodePen は移動できます。以下は単なるスクリーンショットです。

以前にいくつかのゲームエンジン開発を見てきましたが、ここで使用されているものは非常に単純です。

最も基本的なことは、Vector は 2 次元空間内の点/ベクトルを表し、そのメンバーは x と y のみであるということです。

これに基づき、Circle は円を表し、member center: Vector は円の中心を表し、radius: 数値は半径を、speed: Vector は速度を表します。

次に、独自に使用するためにいくつかのメンバー関数をカプセル化するだけです。

TypeScript + Webpack + Webpack-dev-server は複雑ではありません。次の内容を参照するだけです。

1. Webpack/はじめに
2. Webpack/タイプスクリプト
3. Webpack/devServer
4. webpack-dev-server

さらに、npm 実行可能プログラムを実行するために使用される npx も試してみました。これまで、webpack はグローバルにインストールされていましたが、webpack をローカルにインストールする場合は、./node_modules/ を経由する必要がありました。 .bin/webpack ローカル Webpack を実行するには、npx webpack xxx を実行できるようになりました。

devServer の構成に hot: true を追加してホット アップデートを有効にしました。その結果、Web ページに次のメッセージが表示されました。[HMR] ホット モジュール交換は無効です。

これは古い落とし穴であることがわかりました。呼び出す必要がある場合は、コマンド ライン パラメータを追加します: webpack-dev-server --hot --inline。

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。