カテゴリー: CANVAS

テキストで設定するだけでHTML画面上に描画の出来るjavascriptライブラリの canvas でアナログ時計にクールなスキンを施せるプラグイン CoolClock - The Javascript Analog Clock の紹介が IDEA*IDEA の2008年9月2日の記事 自在にスキンをカスタマイズできるJavaScriptのアナログ時計『CoolClock』 で紹介されており、様々な色取り取りのスキンが楽しそうでしたので、 当ブログにも掲載を試みました。

ブログへの実装方法はモダンブラウザでならば、 coolclock.js だけ読み込めば可能になり、 表示時の書式は此方 IDはユニークであれば良い様で、 クラスには CoolClock を指定、次にスキン名、時計の大きさ、秒針の表示の有無、最後に標準時との時差を設定出来る様に実装されています。

javascriptベースでHTMLページに自由に描画の出来る技術としての CANVAS に 驚きを禁じ得ないとしてご紹介したのが、 当ブログ2008年6月19日のアーティクル 描画に於けるjavascript技術CANVAS にて、当該技術の多くの情報を得られるとして紹介の、 HTML5.JP 中ライブラリの一つ レーダーチャート の Apache License, Version 2.0 にて公開されるを実際落して使用して見た処、 HTML上ではjava アプレットや PHP の GD を使用したメソッドは見付かるものの、 javascript では其の実装がなかなか見付からず、諦めかけていた処ですので、 此処まで確り作り込まるを拝見すれば、 書籍何冊かで教えを受けた上、又更に当メソッドに依る恩恵を与えたくれた 羽田野太巳氏には感謝に堪えません。

実際使用するにあたって、例えばクライアントの指定に従えば、 レーダーチャートの項目は拘りから長くなることも多く、 折り返しが必要になることがあれば、 実際に当該機能追加してみたレーダーチャート表示が下にて、

昨今の javascript の隆盛及び活用には目を見張らされますが、 画面描画のライブラリについて調べていた処、 canvas　という何やら描画其の物、名は体を表わすを地で行く様な仕様を知り、 更に詳細を知りたいと思い調べ続けると、 書籍を何冊か拝読させていただきました羽田野太巳氏の手になる記事、 【これならわかる！JavaScript/Ajax】Canvasを試してみませんか？ の第１回 JavaScriptを使って描画するCanvasとは？ に詳しく丁寧に説明がなされており、引用させていただけば

Canvasとは、JavaScriptを使って動的に図を描くために策定された仕様です。これまで、動的に図を表示させる方法としては、Flashが代表的な選択肢でした。しかし、Canvasを使うことで、テキストエディタさえあれば、誰でも無料で動的に図を描くアプリケーションを作ることができるようになるのです。

との此の技術は先ずは Apple に依り開発され、次いでHTML5 規定に利用されるべく

HTML 5は策定中ということもあり、2008年4月時点で、HTML 5を完全に実装したWebブラウザはありません。しかし、Canvasに関してはSafari 1.3以降、Opera 9以降、Firefox 1.5以降ですでに実装されています。Internet Explorerには実装されていませんが、CanvasをエミュレートするJavaScriptライブラリを使うことで、あたかもCanvasが組み込まれているかのように図を描くことができます。ですのでCanvasは、すでに実用レベルに達していると言っても良いでしょう。

とあり、例によってIEのみの為にライブラリの必要なものの、 既に世に広く使用されている様で、 記事中にも掲載される此方は氏自身の運営になるサイト HTML5.JP 中、 Canvasとは では更に突っ込んだ解説が閲覧可能にて、 また当サイトでは canvas が当面メインでの運用のようですが、 HTML5 についても知ることが出来ます。

実際に当サイトよりApache License Version 2.0 で公開されているサンプルの内、 当ブログにも適合し易いものを選んで実装してみましたのが以下の Space is a simple 3D system. になり、javascript ベースで此の様な3Dモデルが表示されることに驚きを禁じ得ません。