Canvasでパーティクルを表現する – Webデザイン学習まとめ

■Canvasとは

Canvasとは、ブラウザ上に図を描くために策定された仕様です。
これまでHTML上で図を表現するためには、GIFやJPEGといったフォーマットの画像を用意する必要がありました。また、条件に応じて表示する図を変化させたり、アニメーションを実現するために、FlashやJavaアプレットが使われてきました。
Canvasは、FlashやJavaのようにプラグインを使わずに、JavaScriptベースで図を描くことができます。
Canvasは、もともとはAppleが発祥で、当初、Mac OSでおなじみのDashboardで使われた技術仕様です。その後、Apple、Mozilla Foundation、Opera Softwareといったブラウザベンダが立ち上げたWHATWGという団体にて策定作業が行われていた「Web Applications」と呼ばれる規格に採用されました。

■パーティクル

パーティクル（particle）とは小片、粒子を意味しますが、パーティクルを動かすエフェクトを使ってページを華やかにします。

■particles.jsをCDNを使った実装

https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js

Particle & Mouse stalker (codepen.io)

参考サイト