• IDEA

  • 2016.07.09

canvasで横幅可変な正規分布曲線を描いてみた

html5のcanvasで横幅可変な正規分布曲線を描いてみました。
 

正規分布曲線を描いてみた

 
デモページはこちら。
 
統計的なイメージをfooter近くに描画する機会があったので、正規分布(っぽい形)をcanvasで表現してみました。
 
ポイントは、
・ブラウザの横幅に応じてcanvasサイズを動的に可変
・ウィンドウリサイズにも対応

です。
 
つまりレスポンシブにcanvasを操作できるということです。
 

canvasのソースコード

 
まずhtml。canvasとその親要素にid振ってます。
 

一応css。配置によって自由に足してください。
「vertical-align: bottom;」を指定しないとcanvasの下に謎の空白が生まれます。
 

そしてcanvas描画のjavascript。「bezierCurveTo」をうまくそれっぽく描いたというだけなのです。
 

正規分布に詳しい方からすると、ブラウザの横幅によっては「これは正規分布じゃない!」などあるかもしれませんが、係数やCSSメディアクエリをお好みに変更していただけるといい感じになると思います。
 
ちなみにこのブログの最下部の波もcanvasで描画しています。SVGとかでやった方が便利なのかなーと思いつつcanvas使っちゃうケース多し。

WRITER

石松豊 / がちゃーん

穏やかな音楽と、揺らぎのある風景と、祭があればよい。アンビエント/エレクトロニカなどが好きでプレイリストをよく作る。個人でプラネタリウムやカフェでコンセプト立てたライブイベントを企画するのが趣味。詳細プロフィールや活動実績はWORKSよりご覧ください。

ABOUT THIS BLOG

orange plus music
(オレンジプラスミュージック)

音楽とインターネットについて考える個人ブログ。最近は個人イベント情報の告知とレポートを中心に更新しています。詳しい活動はTwitterから。

RELATED

orange plus musicリニューアル!変更点やポイントをまとめました

2017.10.15

Twitter埋め込みタイムライン上部の「●●さんのツイート」をなくす方法

2016.10.02

CSSでシネマグラフは作れる?

2016.05.19

【あなたは何色?】IPアドレスを取得して動的にrgbaを表示させるjavascriptを書い...

2016.02.24

【WordPress】前後の記事のカテゴリ名を取得・表示させる方法

2015.05.08

PR