Noob Front End Engineer Blog

CONTACT

素のJavaScriptでCanvas入門

2021/03/31

概要

素のJavaScriptでCanvasに描画する例を紹介します。
Canvas API公式ページのドキュメントを参考に実装行っています。

短形描画

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

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

Path描画

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

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

円とテキストの描画

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

短形アニメーション

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

Pathアニメーション

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

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

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

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

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

まとめ

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

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

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


Written by daichi iwamoto