Canvasで画像を角丸にするJavaScript （Corner.js）
2007年4月20日(金) 12:15
画像をJavaScriptで動的に角まる、ドロップシャドウ などに変更することができるのがCorner.js。角まるを再現するために必要だった、余分なHTMLコードやスタイルシートなど記述が必要なく、画像イメージにclass=を追記すればよい。
利用するには、Corner.jsをHTMLヘッダで呼び出しを行う。window.onload イベントで呼び出されるので、HTMLコンテンツが読み込み完了後に、角まるなどがCorner.jsによって適用される。Canvasを利用して描写されるため、現在のバージョンではInternet Explorerには対応していない。
画像を角まる
画像を角まる＋グロー
最近主流であった<div 要素を動的に生成する手法よりも新しいアプローチ方法となっている。Mozilla Firefoxで表示した場合にも、スクロールなどでもストレスなく描写される。複雑なHTMLとスタイルシートを駆使して作成するよりも、Corner.jsで簡単に角まるにできるメリットがある。
関連する記事
- マウス操作で写真にズームするギャラリーswf（PostcardViewer）
- CSSとCanvasで描写するWeb用のUIフレームワーク（Mocha UI）
- 透明感のあるデザインをJavaScriptで実装する（glassbox.js）
- MP4、FLVなど再生するFlashプレーヤーswf （JW FLV MEDIA PLAYER）
- FlashやFLV、MediaPlayerに対応したスライドショーJavaScript（shadowbox）
- デザインが魅力的なスライドショーJavaScript (Lightview)
- 楽にフォーム入力チェックを実装するJavaScript （JSValidate）
- CSSデザインレイアウトをオンラインで簡単に作成する （YAML）
- ユーザーが再配置可能なWedgetを実装するJavaScript （Prototype Portal Class）
- フォームボタンCSSデザインするテクニック （Rediscovering Button Element）
- 半透明の角まるツールチップを表示するJavaScript （CoolTips）
- JavaScriptでプログレスバーを簡単に実装する （jsProgressBarHandler）
- JavaScriptコード圧縮して盗用から守る （packer）
- iTuneのようにカバーアートを表示するFlash （iTunes Coverflow）
- 画像をサムネイルのサイズで表示するJavaScript （jQuery Thumbs）
- Ajaxでサクサク動くWebファイルマネージャ （Relay）
- アンカータグを利用してスムーススクロールを実装する （df Smooth Scroll）
- MacでもFlashでホイール操作が出来るようにする （SWFMacMouseWheel）
- HTMLなどタグ編集を楽にするエディタ機能JavaScript （jTagEditor）
- 使いやすいYUIライブラリのWYSIWYGエディタ （Rich Text Editor）
