概要

素のJavaScriptでCanvasに描画する例を紹介します。

の公式ページのドキュメントを参考に実装行っています。

短形描画

まずは短径（四角形）の描画例から見ていきましょう。
短径の描画方法に関してはこちらを参考にしてください。

今回の例では、短径の『塗りつぶし』『枠線の描画』『消去』を行っています。

Path描画

こちらは

を指定した描画例になります。
を使用した描画方法の詳細はこちらを参考にしてください。

三角形は

の『塗りつぶし』、ギザギザの線はの『線描画』になります。
ギザギザ線は、の中央座標を取得し、そこからランダムな数値を引いたり足したりして出力しています。

円とテキストの描画

こちらは円とテキストの描画例です。
円の描画方法はこちら、テキスト描画はこちらを参考にしてください。

短形アニメーション

こちらは先程の短径描画のアニメーションです。
横幅を大きくしていく単純なものになっています。

Pathアニメーション

こちらも先程の

アニメーションの簡単なアニメーション例です。
ランダムで出力している箇所があるので、ループで実行させるだけでそれっぽくなりますね！

円とテキストのアニメーション

こちらは円とテキスト描画のアニメーションです。
ランダムなサイズと位置で円を出力しており、出力位置によって色分け等も行ってあります。

組み合わせたアニメーション

最後は全部を組み合わせて実装してみたアニメーション例です。

まとめ

実際にアニメーションを作ってみると、とても楽しいのですがなかなか時間がかかる事がわかりました…
また、試しにこのサイトにも設置してみたのですが、
サイトの初期表示時からループされるアニメーションを設置すると、
PageSpeed Insightsでの評価がかなり落ちるので、SEO的にも考え物です。

SEOがあまり関係なく、インパクトが求めらるような制作であればお勧めですが、
そうでない場合はアニメーションはあまり行わない方が良いのかもしれません。

アニメーションが悪い、というよりはJSでのループ処理が悪さをしている様子。
何か良い方法をご存じの方、是非教えてください😵