「Canvasで絵を描こう」 2012年7月 発行
┏┏┏―― ソフテルのITメールマガジン ―――――――――――――――
┏┏
┏ https://www.softel.co.jp/ (2012年7月)
―――――――――――――――――――――――――――――――――――
+----------+
| ひとこと |
+----------+
ソフテルの メールマガジンへようこそ!
今回のメルマガ案内人は杉山です。
========= 私のプロフィール =========
https://www.softel.co.jp/staff/pf/34
====================================
私は今、スポーツジムにはまっています。
続けること約1年。週3ペースで通い続けたところ、体重が8kgも減りました!
最近ではそれに飽きたらず、筋力UPにも励んでいます。
体脂肪率も23%から5%減少!
筋トレで使うダンベルの重さも、日に日にグレードUPしています。
目指せ!体脂肪率1ケタ台!?
★それでは、今回もソフテルITメルマガをどうぞ★
第107回 ソフテル ITメールマガジン ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
--------------------------------------------------------------------
今回のテーマ:Canvasで絵を描こう
--------------------------------------------------------------------
◆Canvasとは・・・
HTML上で図を表現するために、画像やFlashなど使わずに
Javascriptのコードだけで、図を描くことができる技術です。
HTML5の標準の仕様であり、HTML5に対応している最新のブラウザ
(Internet Explorer 9、FireFox3.1など)で使用可能です。
◆Canvasで描けるもの
線形や、三角形、四角形などの図形はもちろん、
その図形に、複雑なグラデーションの着色もできます。
また、棒グラフ、折れ線グラフ、円グラフも描画可能です。
棒グラフなら、円柱/四角柱の切り替えや、
2D/3Dの切り替えといったカスタマイズもOKです。
ネットショップなど、商品の売れ行きや、購買者の世代別分布図などを
掲載したいときに、重たい画像をわざわざ使わなくても、
きれいなグラフで表現できるので、とっても便利です!
◆Canvasで、棒グラフを描きましょう!
1日の果物の売れ高を、例にとってご説明します。
【準備】
HTML内に、図を描きたいところに <canvas>タグを置きます。
ただし、表示範囲の幅(width属性)・高さ(height属性)および、
id属性の指定が必要です。
また、棒グラフ描画用のJavascriptライブラリをダウンロードし、
HTML上で呼び出します。
【描き方】
?棒グラフのオブジェクト(html5jp.graph.vbar)を生成する。
?「item」パラメータに、商品名とその売れ高(個数)を指定する。
・\"りんご\", \"60\"
・\"すいか\", \"100\"
・\"メロン\", \"40\" など
?「params」パラメータに、棒グラフのオプションを設定する。
おもに、下記のオプションが用意されています。
・たて軸の名称と、項目名
・よこ軸の名称と、項目名
・グラフの背景色
・棒の色、透明度
・棒のかたち(円柱/四角柱/平坦)
・棒のグラデーション
・たて軸、よこ軸の線の色
・目盛の数値の色、フォントサイズ
・凡例の表示/非表示 など。
?「item」、「params」各パラメータを引数にして、
draw関数で、棒グラフオブジェクトを描画する。
以上、簡単に棒グラフの描き方を簡単にご説明いたしました。
そのほか、円グラフ、折れ線グラフも、多彩なオプションが備わっているので、
興味をお持ちの方は是非Canvasを使ってみてはいかがでしょうか。
+----------------------+
| ソフテル社内ニュース |
+----------------------+
先日、7/4(水)に弊社が、東京の楽天EXPOに参加いたしました。
この機会に、「通販する蔵」がネットショップの快適な運営にお役立て頂ける商品であることを
ご来場いただいた方々に、より一層のご理解を頂けたら幸いです。
最後まで読んでくださり、本当にありがとうございました!
次回は、高木かおりプロデュース! 8月8日(水) 配信予定です。
どうぞお楽しみに!!
※予定しておりました配信予定日より配信が遅れてしまいました。
大変申し訳ありませんでした。
+----------------------------------------------------------+
| Web システム構築のソフトウェア会社、株式会社ソフテル |
| ソフテルHP: https://www.softel.co.jp/ |
| ソフテルブログ: https://www.softel.co.jp/blogs/president/|
+----------------------------------------------------------+
バックナンバーは
【こちらです: https://www.softel.co.jp/mailmagazine/ 】
※ このメールは、ソフテルメールマガジンにお申し込みいただいた方、
セミナーや展示会にご来場または名刺交換をさせていただいた方、
また各種資料をご請求いただいた方にお送りしております。
メルマガ配信にご同意いただけない、もしくは不要の方は、お手数ですが
下記の連絡先TELにご連絡、もしくは下記メールアドレス宛にご連絡下さい。
(メールの場合は、件名を「メルマガ配信解除依頼」として下さい。)
なお、メルマガ配信解除のご連絡をいただかない場合は、
ご同意いただいたものとさせていただきますので、ご了承下さい。
【個人情報の取扱要旨】
https://www.softel.co.jp/policy/privacy
【個人情報に関するお問い合わせ】
株式会社ソフテル お客様お問合せ窓口
TEL :0120-49-4437
MAIL:mail@softel.jp
◆◆ ソフテルの謎一挙公開 ◇◆◇◆◇◇◆◇◆◇◆◇◆◇◆◇◆◇◇◆
◆◆ (ソフテルはこんなことしてます) ◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
■ あの憧れの企業のような社内業務を目指されている方!
システム導入をご検討の方
【弊社取引先】
JBR様 http://www.jbr.co.jp/
↓↓↓↓↓↓↓↓↓↓↓↓↓
「WEBシステム開発」専門サイト
https://www.softel.co.jp/archive/
■ ネットショップは楽じゃない!って言わせません。
【弊社取引先】
・スポーツ用品のネットショップeSPORTS様 http://www.esports.co.jp/
・ふとんタウン様 http://www.futontown.co.jp/
↓↓↓↓↓↓↓↓↓↓↓↓↓
ネットショップ運営「通販する蔵」
http://www.softel.jp/
■ 実は、事務、経理いらずなんです
【弊社取引先】
・コムズ http://www.comzz.co.jp/
・ケアネット http://www.carenet.com/index.aspx?cookie_test=true
↓↓↓↓↓↓↓↓↓↓↓↓↓
受発注販売管理ソフト「鳳翔(ホウショウ)」
■ 一括でメールおくりたい人集まれ!!
独自でメールマガジンしたい人!
ソフテルに聞いてみてください。
【弊社取引先】
・桂福祉会 http://www.katsurafukushi.jp/
↓↓↓↓↓↓↓↓↓↓↓↓↓
連絡する蔵
100人に何回送っても、月々1800円
毎月第一水曜日、好評配信中!! » 購読のお申し込みはこちら