【HTML5】Canvasを使って円形のメーターを作ってみたこんにちは、WEBの佐野です。最近は目を引くアニメーションを盛り込んだWEBを多く見かける様になりました。今回は簡単だけど目を引けそうなギミックを作ってみたので紹介をしたいと思います。内容としては、円形のメーターを想定したものになりますが、少し手を加えればロード中のアニメーションや背景にワンポイントで配置したりなど使いどころが多そうなものとなっています。すると既存のプラグインなどがあるかもしれませんが、何かの参考になるかもしれませんので備忘録もかねて共有したいと思います。覚えておきたいメソッド最後に制作イメージ制作物の動きはこの様なものになります。今回は動きの紹介を主にしているので見た目はCSSのみで実装しています。凝ったものを作る場合は外枠や中側を画像にするなどして実装してください。動きのイメージを見ていただいたので、次はコードの紹介です。}},10);動きだけのコードなので、かなりシンプルになっています。Canvasを使った事がある方なら1つ1つのメソッドも見覚えもあるのではないでしょうか。覚えておきたいメソッド今回の実装にあたり、覚えておいた方が良いポイントとなる3つのメソッドです。・arcメソッド(円弧を描画する)・lineToメソッド(線を描画する)・fillメソッド(描画した図形内を塗りつぶす)描画の流れ図の完成までの流れがわかればJavaScriptの処理も理解しやすくなるかとおもうので、参考として縦横300pxの範囲に200度の図を作成する流れを見ていただきます。arcメソッドarcメソッドを使って200度の円弧を描画します。arcメソッドの引数など詳しい情報はこちらをご覧ください。false);このメソッドは円弧の開始位置が円の中心から右側を基準とするので最後に調整します。※こちらの画像は流れをわかりやすくするため、線を描画するだけのstrokeメソッドで描画を行っています。lineToメソッド次に描画範囲の中心に向かってlineToメソッドを使って直線を引きます。lineToメソッドの引数など詳しい情報はこちらから。HTML5.JPctx.lineTo(150,150);fillメソッドここまで線の描画を行っていたstrokeメソッドから塗りつぶしを行うfillメソッドに切り替えます。この関数は線の始点と終点をつなげて、その範囲内を塗りつぶすメソッドです。HTML5.JPctx.fill();始点の調整ここまできたら、後は円弧の開始位置を右から上に変更するだけで完了です。始点の位置を変えるのにはCSSを使います。rotate(-90deg);開始位置を変更するだけならJavascript側でも可能ですが、アニメーションを組み込む際に計算等で面倒になる事が多い為、CSSを使用しました。以上で図の作成ができるので、後は角度を変える処理を追加すると冒頭にあった制作イメージが完成します。最後に冒頭の制作イメージでは自動で動きますが、カスタマイズ1つでカウントダウンやスクロール量・テキストエリアのテキスト数に応じて角度の増減をコントロールするなどのギミックとしてにも使用できるかと思います。簡単に作成できて、見た目を凝ればかなり目を引くギミックになるかと思うので是非カスタマイズしながら面白いギミックを作ってみてください。canvasの勉強や同じようなものを作ろうとしている方の力に少しでもなれたら幸いです。簡単で面白いJavaScriptとかあれば紹介したいと思います。WHを使ってSES...2019/3/29メニューを閉じるCONTACTゲーム開発、Webサイト制作に関するご相談等ございましたら、お気軽にお問い合わせください。